Community Forums › Forums › Archived Forums › Design Tips and Tricks › My site's sidebar disappears?? Not responsive?
- This topic has 14 replies, 3 voices, and was last updated 10 years, 7 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
July 30, 2013 at 12:14 pm #53226FabioParticipant
Hi,
this is a bit tricky to explain, but I'll do my best!When I go to my website
http://letstalksex.netI can see a body and a sidebar on the right.
But everytime other people send me screenshots of my site (including the screenshot on google webmaster tool) my sidebar is never there...
Ideally if I reduce the width of the window, the eleven40 theme adapts and shows body on top and sidebar at the bottom to fit the screen, but this is not the problem.
The problem is that when I reduce the width of the window by just a little bit, the sidebar disappears at the bottom in its original small width and the body stays there on the left not adapting to the screen:
Neither sidebar or body re-adapt to the screen in responsive mode, unless you reduce the window a lot.
This is problem I've never had with a sidebar-content-sidebar template, it only happens now.Before, with the sidebar-content-sidebar template the theme would always fit the screen in a responsive way, now instead if I reduce the window a little, I lose the sidebar and get an unbelievably ugly non-responsive content on the left.
I would attach screenshots, but I can't see options for that here.
Could someone please help me getting the sidebar to always:
1) either displayed on the right
2) or displayed underneath the "content" to fill up the screen?I really hope my issue is clear...
Please help!Thanks
FabioJuly 30, 2013 at 4:44 pm #53282RobGMemberIt seems like you need to ajust your sidebar size, it's to large in width, try to locate the following code in your ( style.css ) file and change the width from 325, to around 280, it should bring your sidebar back to it's location. Hope this will help you.
/* Primary / Secondary Sidebars ------------------------------------------------------------ */ .sidebar { display: inline; float: right; font-size: 14px; padding: 25px 0 0; width: 280px; }
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJuly 31, 2013 at 2:51 am #53339FabioParticipantHi Rob,
thanks for your help.I've changed the width to 280 but I think there still is an issue, because when I reduce the size of the window at a point the sidebar goes underneath the "content" leaving a blank space on the side.
It would make sense if when the sidebar disappeared underneath the content, the content would take the full width of the screen in responsive mode, instead there still is a "transactional" phase when the sidebar disappears and the content does not adapt leaving a blank space on the side.
Is there any way this can be fixed and getting the content to fill up the whole screen as soon as the sidebar "disappears"?
Thanks a lot!
FabioJuly 31, 2013 at 3:25 am #53347RobGMemberDid you refresh your browser?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJuly 31, 2013 at 4:32 am #53358FabioParticipantHi Rob thanks for your reply.
Sure I refreshed the browser.I think this may be theme-related because I've checked the eleven40 demo and even there there's a transition phase between having the sidebar displayed and having it adapting to the screen.
If you reduce the width of the screen slowly, you'll see that at a point the content stays on the left and the sidebar disappears leaving a blank space.
Then if you keep reducing the width of the window, the content adapts.I don't know if there's any way to improve this or if it would be too complicated.
Thanks for your help
July 31, 2013 at 2:39 pm #53427RobGMemberI just took a lot and it seems to be ok now did you fix the problem?
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJuly 31, 2013 at 3:55 pm #53437FabioParticipantYes and no.
It's a bit better than before, but the sidebar still disappears when you reduce the width of the window without the content adapting to the screen. But I guess that's just the way the theme works since when I check the demo
http://demo.studiopress.com/eleven40/layouts/cs/
it does the same exact thing.Thanks for your help.
FabioJuly 31, 2013 at 4:03 pm #53438RobGMemberYour very welcome glad it seems a bit better
To speed up the process please post the link to the website in question.
We recommend using Firebug to view source codes http://getfirebug.com/
RobGoss WordPress Developer
We build WordPress websites for your business or personal goals
http://www.robgoss.com / Follow me Twitter / https://twitter.com/robgossJuly 31, 2013 at 4:38 pm #53445Tony @ AlphaBlossomMemberThe issue is your main container width is 950px. Your content is 670px (630px + 39px right padding + 1px border) and your sidebar is 280px, for a combined width of 950px.
When your resolution drops below 950px, because you're using set pixel widths and not percentages, the sidebar is forced below the content.
To fix this, you'd have to either convert them to fixed widths, or change your media query in your style.css so that the content and sidebar become 100% at 950px and below. Currently, they become full width at 800px, so that's why you see the white space between 800px and 950px.
Hope that helps...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 3, 2013 at 8:37 am #53939FabioParticipantHey Tony,
thanks a lot.Sorry if it took me 3 days to reply!
So how do I exactly do that?
What do I exactly need to change in my style.css?Thanks a lot!
FabioAugust 6, 2013 at 11:59 am #54421Tony @ AlphaBlossomMemberHello,
It depends on what exactly you want. If you're ok with everything going to 100% at 950px or below, you can find this line:
@media only screen and (max-width: 767px) {and change the 767px to 950px (you may have to adjust the 950 number a little to do what you need). If you do that, I'd go through the rest of the site to make sure it looks ok with that adjustment.
You can also add a new media query and add only the things you want changed:
@media only screen and (max-width: 950px) {/* new rules here for 950px and below */
}
I think the best way, but also the most complex way is to convert your sidebar/content to percentages instead of fixed widths...along with the media queries to change as you scale down.
Hope that helps!
Take care,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 9, 2013 at 4:40 am #55186FabioParticipantHi Tony,
thanks for your reply.I've checked my style.css, theme function and home.php and haven't found this line:
@media only screen and (max-width: 767px) {Where is it?
Thanks!
FabioAugust 9, 2013 at 12:05 pm #55282Tony @ AlphaBlossomMemberHey Fabio,
Sorry, I didn't look that closely. Yours actually is for 800px, so the line would be:
@media only screen and (max-width: 800px) {If you change the 800 to 980, your site will go to 100% at 980px instead of 800px now. You'll have to play with the number, but around 980 is probably where you want it (originally I said 950, but after playing with it a little closer, I think closer to 980).
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
August 9, 2013 at 12:29 pm #55292FabioParticipantThanks a lot Tony, that works!
I've changed it to 980 and now it flows just like I wanted it.Thank you very much for your time and help!
FabioAugust 9, 2013 at 12:31 pm #55293Tony @ AlphaBlossomMemberThat's great! Glad I could help.
Have a great day...
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.