Archived topic
Margin for pictures in the block "media and text"
7 replies · Started by Viktor on April 26, 2022
Hey!
How can I add a margin to the pictures in the block "media and text"?
In mobile the picture is at the edge of the screen which doesn't look good...
But in the block "media and text" there is no possibility to select a margin and also I cant add some CSS class...
Do you have any solution for me?
Thanks a lot in advance!
Hi Viktor,
Do you have GenerateBlocks plugin installed?
If so, you can wrap a Container block outside the media and text block, then you will be able to control the spacing for different devices.
Hi Ying,
thanks for your quick respond!
Yes I already tried this but then I can only change the margin for picture and text... not separately.
And the text has some preset automatic margin, so if I adjust the margin with the container then the margin of the text gets also bigger and does not look good anymore (mobile)...
Another example: I want the same space between edge of the screen to the picture and the edge of the screen to the text... How would this be possible?
Hi there,
can you share a link to a page where we can see the issue ?
Hi David,
the link is in the private information field.
In mobile view: The picture right under the headline "At vero eos feugait nulla facilisi" has less left and right margin than the text under the picture (headline "Nam liber tempor cum"). I think it is because of a 8% padding? Can I change this padding?
I just would like that the space between picture and edge of the screen is the same as the space between text and edge of the screen...
Thanks!
Hi Viktor,
Thank you for sending the link to the site in question.
Here is a CSS code you may try adding in Appearance > Customize > Additional CSS:
@media (max-width: 768px) {
/* CSS in here for mobile only */
.wp-block-media-text .wp-block-media-text__content {
padding-left:0;
padding-right:0;
}
}
This code would remove all left and right padding of all Media and Text Blocks on mobile view.
Hope this helps! Kindly let us know how it goes. :)
Hi Fernando,
oh wow thats great! It works fine and now I even know how to edit elements like media and text in the CSS.
Thanks a lot guys!
You’re welcome Viktor! Glad to be of assistance! Feel free to reach out anytime you’ll need assistance with anything else. :)