Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Reduce margin mobile

Home Forums Support Reduce margin mobile

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #317130
    Lali

    Hi
    I want to reduce the margin on mobile and tablet. Especially when there is one image. Fullscreen in width.
    It would look more beautiful if the image is all the way out to the screens edge. Not one cm white to the left and right.

    I want this to work automatically throughout the entire site, not to tweak this every time I attach an image.

    I use also Elementor.

    Testsite: http://wordpress.lali.se

    GeneratePress 1.3.46
    #317239
    Leo
    Staff
    Customer Support

    Hi there,

    You can remove GP’s mobile padding in Customizer > Layout > Container > Mobile Content Padding.

    The rest of the padding around the image is from Elementor so you might have to ask them if there is a way to adjust for mobile.

    If not then maybe give this CSS a shot:

    .elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
        padding: 10px 0;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #317255
    Lali

    Hi
    Thank you for the quick answer, that sorta works… The pictures is much better displayed on mobile!
    But the css affect the text as well. I’d like the text to be a bit padded from the edge. Any thoughts on that?

    #317256
    Leo
    Staff
    Customer Support

    You can add some padding to the header which is added by GP:

    @media (max-width: 768px) {
        header.entry-header {
            padding-left: 30px;
        }
    }
    #317264
    Tom
    Lead Developer
    Lead Developer

    Are you wanting to do this to all images in your content, or just your featured images?

    The best method is to wrap your images in a div and apply negative margin to them that matches your content padding:

    <div class="ignore-x-spacing">
        <img src="..." />
    </div>

    Then your CSS:

    .ignore-x-spacing {
        margin-left: -40px;
        margin-right: -40px;
    }
    #317266
    Lali

    Tom, I’d like to do it on all photos. But on desktop, when pictures are ordered in columns, there should be spacing between them, but justified on both sides so they align with single photos…

    It needs to be kinda automatic, because in the future I won’t be the only one managing the updates. So I don’t wanna wrap it manually in divs.

    #317267
    Lali

    Leo, well, that fixes the title of the post, but not the text element, the form for comments and other modules I happen to use… =/

    #317275
    Tom
    Lead Developer
    Lead Developer

    It’s not really possible to do it automatically without using Leo’s method.

    @media (max-width: 768px) {
        header.entry-header,
        .elementor-text-editor {
            padding: 0 30px;
        }
    }
    #317282
    Lali

    OK
    Thank you, I’ll start here and tweak a little.

    Thanks for the directions!

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