2 problems in the mobile view

Hi there,

Are we talking about the blog page? If so, I'm not seeing any left/right padding. Can you show me a screenshot?

The space around the main featured image on single posts is because the image isn't wide enough to fill the entire content area. If you upload a wider image, that space should go away.

Let me know :)

Hi Tom, thanks for the reply!

I've attached 2 screenshots regarding my problem in the first message (admin field).

1) I think I understand the source of a problem. I set the maximum width for the image in the directory to like 300px.

Can we still have this for the desktop and change to the full size image on the mobile and tablet, please?

2) Please take a look at the last screenshot. It's made in the individual article. You could see the tiny margin on the left and on the right from the main image

1. The options in the Customizer actually resize the image, so it's not possible to size it back up without losing quality.

An alternative would be to remove the sizes in the Customizer, and use CSS to resize the images. As long as the images are only as large as they have to be (and not any larger), there shouldn't be any issues with this method.

2. Try adding this CSS for both issues:

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-left: -13px;
        margin-right: -10px;
    }

    .post-image img {
        width: 100%;
    }

    .no-featured-image-padding .featured-image {
        margin-left: -13px;
    }
}

Hi Tom,

Thanks a lot for the help!

I've applied the code in the customiser and saw the live preview. It seem that there are 3 issues arise:

1) I see this warning https://gyazo.com/9cd737a299188d04c3555c2de98f0def
2) After I apply your code for some reason I lose the new borders that David help me to implement here https://generatepress.com/forums/topic/2-requests/#post-801536 so I think the code interfere somehow
3) Also I can still see the tiny right padding for like 1px (and I don't see the left padding anymore which is good). Please note that I did not apply the code, I just put it in the Wordpress Customizer

That code looks like you're missing the last } character.

Does the mobile view have those borders? Typically, the shadows on each side shouldn't appear on mobile.

Many thanks, Tom, spot on!

I missed the bracket, therefore it prevent other CSS code to run.

I've applied the code. So my last question about the tiny right padding then

Strange, I can't see the right padding issue. You could extend the margin-right by 1px, but that might cause horizontal scrolling.

@media (max-width: 768px) {
    body:not(.post-image-aligned-center) .inside-article .post-image {
        margin-left: -13px;
        margin-right: -11px;
    }

    .post-image img {
        width: 100%;
    }

    .no-featured-image-padding .featured-image {
        margin-left: -13px;
        margin-right: -11px;
    }
}

Thanks a lot Tom. That's very strange. Have you seen the website from the mobile?

I was able to see that. Now the code has fixed the issue. Also I don't have any horizontal scrolling. What about you?

Many thanks!

Looks good to me! :)