Archived topic
Content Column Left On Mobile
4 replies · Started by Simon on February 25, 2021
Hi, I made a lot of changes on my site today and now just realised the content is going too far left on mobile on all pages (except homepage). There's no padding.
I don't think it's the new header and footer elements and double-checked padding.
I gather it may be something to do with @media?
Here's the code I added today, could you see if it's any of these that are causing the issue please?
@media (min-width: 769px) {
.single-post .page-hero + #page {
margin-top: -120px; /* adjust margin to suit */
}
}
@media (min-width: 769px) {
.single-post .page-hero + #page {
margin-top: -225px;
}
}
@media(min-width: 1024px) {
.right-sidebar .site-content .content-area {
width: 75%; /* Width of content minus width of sidebar */
margin-left: 25%; /* width of sidebar */
}
}
@media (max-width: 1024px) {
.wp-block-image .alignleft,
.wp-block-image .alignright {
float: none;
margin: 0 auto 1em auto;
}
}Hi there,
I'm not sure I see what you mean.
Perhaps you mean the empty space on the right side of the screen?
If so, that's from your images overflowing on horizontal axis, exceeding the entry-content container.
You can try addressing that by adding this CSS:
@media (max-width: 768px){
.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull {
margin-left: 0px;
max-width: 100%;
}
}It's weird, if you see the pages (except the homepage) on mobile the text is to the left (see private info)
I added the code but it didn't seem to change anything.
Found the issue! The cause for themakemoneyonlineblog.com/affiliate-marketing (post) was container type: contained. Changed specific pages/posts to default and all good 👍
The pages were down to the Page Width Element. Display rules weren't set to all pages.
Appreciate your time! :-)
Nice catch! glad you got it sorted. :)
