CODEWITHSUNDEEP
css
Nadav Himmelfarb
Nadav Himmelfarb

Reputation: 121

How to make my image to keep getting smaller responsively?

When my browser size is under 950px, my main image stop getting smaller and start to hide behind the browser window. I have tried to change the width, but than I'm starting to see my background-color. Why is that and how can I fix it?

This is my Codepen And part of my code:

#image {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
border-bottom: 1px solid #ed1c24;
object-fit: cover;

}

By the way, I don't know if it's customary here or not (and if not, just tell me so) to ask two questions in one post, I don't why my media stop respond, and when I get to 830px, nothing changes. It worked like two minutes ago.

Thank you all

Upvotes: 3

Views: 33

Answers (1)

Flink
Flink

Reputation: 1006

Set this on the #image:

height: auto;

And you are missing a bracket at the first media query (line 189), that's why the others don't work.

Also, top, bottom, left and right have no effect when position is set to relative.

EDIT: I played around with some other elements in your Codepen. This should be closer to what you want: https://codepen.io/anon/pen/OZEOdW?editors=1100 At least you can compare it to your version, might be helpful :)

Upvotes: 2

Related Questions