[Resolved] Reduce margin mobile

[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

[Leo]

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/

[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?

[Leo]

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

@media (max-width: 768px) {
    header.entry-header {
        padding-left: 30px;
    }
}

[Tom]

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;
}

[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.

[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… =/

[Tom]

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;
    }
}

[Lali]

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

Thanks for the directions!

[Tom]

No problem! 🙂

[Author]

Posts