[Resolved] Customizing – Layout – Padding issues – Mobile View

[Lewis]

Hi

I am having an issue with the content padding on mobile view.

I am happy with the padding for my homepage, however, on my blog post pages (mobile view) the right side padding is causing the featured image to run off the right side of the page. Additionally, the text is running too close to the right-hand side for blog posts on mobile view.

If I try to adjust the padding to suit the blog post pages, the query loop on my homepage is then affected and is squashed in too far to the left.

Is there a way to adjust padding for the blog post pages only? In a way that will not affect the homepage.

Thanks.

[David]

Hi there,

can you share a link to where i can see the issue ?

[Lewis]

Hi David

If you check out the blog posts on mobile view, the featured image runs off the right of the page & the text is too running a bit too close to the right.

When I try to adjust the padding to fix the issue, my homepage is affected (I am happy with the homepage layout & don’t want it adjusted).

Is there a way to adjust padding on the blog posts only? Thanks for your help
Lewis

[Fernando]

Hi Lewis,

In Appearance > Customize > Layout > Container, try setting the Right padding to 16px as well on mobile. Example: https://share.getcloudapp.com/L1u61zlW

Let us know how it goes.

[Lewis]

Hi Fernando

Thanks for coming back to me. The issue with that is the homepage padding is also adjusted. I don’t want to adjust the homepage padding, only the blog post padding.

Thanks
Lewis

[Fernando]

I see. Try adding this through Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .single-post div.site-content {
        padding-right: 16px;
        padding-left: 16px;
    }
}

[Lewis]

Great stuff, another problem solved, thank you Fernando. I am glad someone knows coding !

Lewis Murphy

[Fernando]

You’re welcome, Lewis!

[Author]

Posts