OK, the problem is that you have the sidebar (which is actually the header) set to a fixed position on the left, which takes it “out of the document flow.” Basically that means that the browser treats it as if it doesn’t take up any space in the window, so other elements (like the main content area) slides underneath.
What you should do, then, is set a left margin on the main content that matches the width of the “sidebar.” Add these rules to the custom CSS (Appearance > Edit CSS):
.content-area {
margin-left: 20%;
}
@media (max-width: 768px) {
.content-area {
margin-left: 0;
}
}
The first rule adds the left margin to the main content area. The second rule removes the left margin when the width shrinks to the size of a tablet, because the content area will have then collapsed under the header.
Perfect! thank you for not only figuring it out but telling me what exactly the problem was and explaining the solution.
Hi,
I am suffering from a similar issue whereby a map I am using has a feature to expand in size. When the feature is enabled the map extends beyond the content area into the sidebar area but of course it shows below whatever is featured in the sidebar thus the map is only partially visible.
I know a popup light box should display when the Bigger map feature is selected but unfortunatly the Map is a third party plugin that doesn’t offer this kind of support and I don’t have the coding knowledge to add this.
Any help appreciated.
http://www.healthexchange.org.uk/where-to-find-us/solihull/
If your theme has a custom CSS option, then add the rule below to it. Otherwise, use a CSS plugin like Jetpack or Custom CSS Manager (don’t edit your theme files directly).
.mapp-layout {
z-index: 999;
position: relative;
}
By the way, in the future, please start your own thread instead of adding on to someone else’s. The original poster may not want to see e-mail notifications unrelated to his/her original topic. Thanks.
