content displaying incorrect width.

that is astonishing timing – i asked on forums all over the net and had just given up and was beggining searching for another sliding side bar i can use – glad i checked my emails first.

i’ll have a play with it and let you know how i got on :0)

ok its taken me ages as i’m really not very good at code and web design but i almost have it working correctly so here’s the code i used. its probably not a very clean fix as i had a really hard time locating the code for the fields in the general settings (width, height, etc) so i’ve forced it by putting this code in my child them css with !important tags.

#tab_slide {
	left: 0px;
	height: auto !important;
	width: 25%;
	}

@media all and (max-width: 1200px) {
	#tab_slide {
	height: auto !important;
	width: 65% !important;
	right: 0px !important;
	}
	}

@media all and (max-width: 1200px) {
	#tab_slide_include {
	padding: 0px;
	}
	}

@media all and (max-width: 1200px) {
	.tab_text_bg {
	top: 25%;
	}

i set the height to auto because i wanted the tab_slide_wrapper to change dynamically with the content (and its overflow).

the width is set to 60% as that gives a good amount of room for content on a mobile device or small screen size.

i’ve also turned off the padding which takes up too much space on a mobile device and moved the tab higher up the page so it shows up when a visitor 1st visits my site. here’s a link focallocal.org

only one problem left! i’ve spent the past 6 hours trying to work out why on the smaller screen the tab starts part open already. it seems to be this line:
<div id="tab_slide" class="tab_slide tab_slide_wrapper" style="left: -198px; height: 100%; width: 25%;">

but i cant work out where the style-“left” value is set, or how to make it change with the screen size.