CODEWITHSUNDEEP
htmlcss
Ray Nature
Ray Nature

Reputation: 23

Gap in image - only on mobile - (how to make a responsive website)

enter image description hereI'm trying to make a gap between the bottom of my div and my image disappear.

I tried reducing the bottom margin of the image, which worked...but only on pc, if you were to open my site on a mobile phone the gap would still be there

here is the class for the image and what I wrote for it to prevent the gap from happening but sadly this doesn't work on mobile:

.mountain {margin-bottom: -5px;}

It should've made there be no gap on both PC and mobile, so why is there one. Am I doing something wrong

btw if you guys could possibly open it on mobile (if you don't mind, literally everything changes), I also want to know how what I see on PC can be put at least almost the same thing on mobile

p.s. Here is the photo of the image on PC without changing the margin-bottom, should I add another photo but from mobile?

p.s.s here is the link to my little website . . . https://raynature.github.io/personal-site/

Upvotes: 1

Views: 240

Answers (1)

rachel
rachel

Reputation: 157

Images by default are inline elements. They follow the baseline of the text of the container they are in (even if there is no text). Add: 

.mountain {
  vertical-align: bottom; 
}

to your image via your CSS.

Upvotes: 2

Related Questions