Strange Problem – Sidebar Disappears to Bottom of Website

[LaunchPad777]

Hello there,

My client just called me and reported that when he looks at his website on one of his computers, the sidebar disappears. However if he scrolls down to the bottom of the website the sidebar is there.

I can't seem to duplicate this at all. My understanding is that the website should "fit" onto any desktop screen.
This is very confusing to say the least. Is the Genesis Sample child theme responsive?

Please help - any insight will be appreciated.

Best regards
Greg

http://www.gpmotorworks.co.za

[Brad Dalton]

Could be caused by an unclosed HTML tag like unclosed div tag or incorrectly modified/customized code.

---

Tutorials for StudioPress Themes & WooCommerce.

[Genesis Developer]

bigger screen sidebar is coming fine. but if i resize the window then sidebar is coming at bottom. I checked your css file. there have some issues. You added some extra css in the file. You need to fix those css little bit.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[LaunchPad777]

Thanks guys,

When I look at the Editor all the css seems to be in order....but I'm not an expert by any stretch of the imagination.

How do you go about identifying the css that is causing the problem?

Which css code is likely to cause this problem so that I can avoid making the same mistake in future?

Regards
Greg

[LaunchPad777]

Please help.....I'm not sure which css is responsible for the problem...

Appreciate your time...
Regards
Greg

[LaunchPad777]

Hey guys,

Please help....

Regards
Greg

[LaunchPad777]

Hi there,

I realise I'm being a pain.....I really don't know how to fix this...

Any specific help will be very much appreciated....

Regards
Greg

[Henrik Blomgren]

I would suggest you take the latest version of the Genesis Sample theme. Check the CSS file there and start over. Since from what I saw of the CSS file it has some serious trouble. Adding a 5000px margin only to remove said margin with a 5000px padding is not a good idea.

When you make the window smaller you go over your width. You´ve set the width of the content to be 800px but with smaller screens the content is resized to 720px. Obviously 800px and 180px for the sidebar is not going to fit onto a 720px wide container. So I´d suggest starting over. Otherwise if you want people to help you with this you´d have to pay since it´s one helluva lot of work fixing everything.

[LaunchPad777]

Thanks for taking the time to explain Henrik....

Ok completely starting over is not an option for me....
From what you have explained, the hard settings for content and sidebar widths are causing the problem.

Questions
- what is the best practice for setting content and sidebar width other than the way I have done it?

- is the Genesis sample theme not responsive?

I appreciate your input...

Best regards
Greg

[SelenaD]

When you make your width a hard number like "800px" then it is going to stay that even when the screen get smaller - so then your content starts getting cut off.

Instead do your content and sidebar widths as a percentage, starting at your highest width. Let's say you've set the site container width to be 1200 px, with the content 800px and the sidebar 300px.

Set your content width at 66.666666666% (800/122) and your sidebar at 25% (300/1200). You can then use "max-width" or "min-width" to add upper and low limits. If you need the sidebar to remain a constant you can still use percentage for the content - but at some point they won't both fit anymore.

The theme is responsive - dropping the sidebar below content is what responsive themes do when there's not enough room, and once you edit it you may break some of the responsiveness.

A tool like responsivepx.com can help you find the spot where things are dropping so you can make changes or use media queries to deal with those points.

[LaunchPad777]

Hi Selena,

Thanks for your input.....really is appreciated.

At least now I understand what is causing the problem and how to go about fixing it.
Can these edits be made via Appearance > Editor?

Just not sure of this - "You can then use “max-width” or “min-width” to add upper and low limits."
-is that something you must do or is it optional?

Thanks
Greg

[SelenaD]

The max and min widths are optional, your site-container is going to create a maximum anyway. But they can be handy in cases where you want something smaller than the container. For instance, on a full width layout site I have content set at 800px using a percentage of the site width. However, on smaller screens I want it to fill the space, not start shrinking. So one way to do that is set width at 100% with a max-width of 800px.

It's a way to cut down on the number of media queries you need by making your content more fluid to start with.

[Author]

Posts