My image slider on mobile screen has this weird grey area between the image and the slide nav. In my webflow designer (edit and preview mode), I can’t see this grey area (See Screenshot 1). But when I publish it, it is there (Screenshot 2)
. I don’t understand where the problem is, I have checked all the margins and paddings.
The reason behind this thing occurred is due to the browser’s default behavior. The main fact is that <img> as an Inline element this mean that an image is treated just like an alphabet and it will sit on a baseline like a, b, s, A, etc reminding space is kept for letters like p, j, y etc. This bottom part is in Typography called Descender. All you should do is change image to be a block
Hello,
Thank you for this suggestion. I tried to put the images in BLOCK but it doesn’t seem to work. Kindly have a look in this link: Webflow - Pallavi's Site