Archived topic
Main content not filling space vacated by sidebar on mobile
6 replies · Started by Erik on October 30, 2022
Hi! I awoke to an email and screenshot from a reader showing the title for one of my posts running vertically, letter-by-letter, down the left side of a mostly blank mobile screen.
I have a layout with main content and sidebar. After playing around, I discovered that when the screen becomes narrow enough for the sidebar to reposition at the bottom, the main content is not filling the space the vacated by the sidebar. The main content continues to become narrower as the screen becomes narrower, leaving white space across most of the right side of the screen.
If I scroll down to the bottom, I can see the sidebar content filling the full width of the screen as intended, so this layout problem seems to be only with the main content area.
I had my host check some things out, and they indicated that some JS was failing to load. You can see that here.
Any idea what's going on here and how I can fix it? Thank you.
Hi there,
Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?
Let me know :)
I've done that and the problem corrected. Just reactivating them one-by-one now to see when it comes back...
The problem seems to be a conflict with Autoptimize. Site displays normally when I deactivate that one, but the problem returns when I re-activate it.
Hi there,
can i see the site ?
Sure, it is https://www.beanpoet.com/. Autoptimize is currently deactivated, so you probably won't see the issue.
I can only assume that Autoptimize is scrambling the order of the CSS.
Might be worth checking with the plugin author
Or try adding this to your CSS:
@media (max-width: 768px) {
#content .content-area, #content .sidebar {
float: none;
width: 100%;
left: 0;
right: 0;
}
}It the CSS the theme uses, i just made it more specific and hopefully it will load last!
