content displaying incorrect width.

Hi focallocal,

I uploaded a new version 1.51. This version allows you to easily play around with CSS now directly from the plugin settings page. Try it out and let me now if this wors for your issue.

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)

i’m also working out a way i can set the slide to different widths for web and mobile browsing and if i work it out i’ll post it here.

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.

i’m still stuck trying to find the code that is setting the style=left value so i can play around and make it responsive to different screen sizes.

@zoranc it would be a huge help if you could point me in the right direction as once i find it i can work out a solution and then your plugin will look amazing on a mobile device and all size screens!

??