- This topic has 7 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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?
Customer Support
Hi Christian,
It works correctly when I check:
https://www.screencast.com/t/TCSCFraqMake 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-imageclass are full width:
https://www.screencast.com/t/qHPxBTyiv0XProbably a caching issue. On a third device it work. Thank you!
No Problem 🙂
- You must be logged in to reply to this topic.
