Archived topic
Full width for post image on mobile view
7 replies · Started by Christian on January 11, 2023
Hello,
I want to have images in post full width for mobile view. Actually, it could be easy with global styles in generateblocks but there is a known bug for spacing on images. My content padding is left and right -20px. Instead of adding on every image -20px left and right I added an additional css class "post-image" to set margin-left and margin-right in the customizer > additional css.
The following code doesn't work because I am using the image block with caption and I have the impression that I have to get into the figure class section where the class gb-block-image is used
@media(max-width: 769px) {
.post-image{
margin-right: -20px;
margin-left: -20px;
}
}What am I missing? Or do I follow a wrong approach?
Hi Christian,
It works correctly when I check:
https://www.screencast.com/t/TCSCFraq
Make sure you've cleared the cache.
Hello Ying,
thanks for your quick reply! For the first image I have set the margin on the image itself. I have removed it and you see that the CSS doesn't apply correctly for this image and all the other ones in the post.
Christian
I see, try this CSS:
figure.gb-block-image:has(.post-image) {
margin-left: -20px;
margin-right: -20px;
}Thanks! When checking it on the desktop pc in chrome in mobile view it works. But on my mobile device in the browser via an incognito window it doesn't work. I checked it on another mobile device and same result that it doesn't take the margin for images into consideration.
I just checked on an iPhone, and all the images with post-image class are full width:
https://www.screencast.com/t/qHPxBTyiv0X
Probably a caching issue. On a third device it work. Thank you!
No Problem :)