[Resolved] Too much spacing on mobile

[Joe]

My homepage looks good on desktop, but too spread out on mobile.
https://retireby40.org

The list of blog posts.
On desktop, the title and comment are on the left of the feature image.
On mobile, I see feature image first then title then comment.
Maybe the feature image is too big in mobile?
How do I reduce the feature image just for mobile.
The left and right margins also look too big.

I’m using WP show posts to display the posts.

Thank you

[Elvin]

Hi,

I’m not sure I understand what look you’re trying to achieve. Can you explain a bit more?

Maybe the feature image is too big in mobile?

It’s displaying that way on mobile because WPSP’s featured image is set to “float:none” on smaller viewports so the contents display vertically.

To clarify: Do you want it to appear like this? https://share.getcloudapp.com/E0u95w0B

If so, try adding this CSS:

@media (max-width: 767px){
 .wp-show-posts-inner .wp-show-posts-image {
    float: left;
}
}

The left and right margins also look too big.

Can you specify which left and right margin? I don’t see any margin for the WPSP list.

Perhaps you meant the main content’s margin-left and right on desktop? if so, this is reduced by increasing the max-width of the content area.

To do this, go to Appearance > Customize > Layout > Container and increase the Container Width so it reduces the left and the right margins.

If you’re pertaining to the left and right spacing on mobile, the spacing you see is a padding added by your UAGB column. This isn’t something added by WPSP or GP.

A wise man once said:
"Have you cleared your cache?"

[Joe]

The css works.
Thank you!

I’ll try to modify the spacing in UAGB column.

[Elvin]

Glad it works for you. No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts