[Resolved] 2 problems in the mobile view

Home Forums Support [Resolved] 2 problems in the mobile view

Home Forums Support 2 problems in the mobile view

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #740965
    Elia

    Hi again,

    Could you please take a look at 2 problems on the mobile view?

    1) On the directory view main images have some left and right padding (like 20px). How can I delete it?
    2) In the individual posts the main image has a tiny left and right padding (like 1px). How can I delete it?

    #741736
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #800656
    Elia

    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

    #801202
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #801545
    Elia

    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

    #801549
    Tom
    Lead Developer
    Lead Developer

    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.

    #801554
    Elia

    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

    #801556
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #801559
    Elia

    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!

    #802193
    Tom
    Lead Developer
    Lead Developer

    Looks good to me! ๐Ÿ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.