I made the pic responsive but now it's way too big

HTML-CSS
1

https://codepen.io/gtrman97/pen/ExNRMgd

How do I make the pic similar width to body and also esponsive?

2

Clamp is the best solution for my responsive needs. (if that is what you are asking about, question is a bit unclear)

Combine this with min-width, max-width etc for nice solutions.

3

You need an element with the id of main. the first user story to pass. But that’s not your problem. Remove the width="100vw" on the img then it is the same width as the body. Review how to make an image responsive inside a container.

4

@MyTrueName It’s a tribute project. Clear once you know that.

5

I did, they tell me to use:

img {
    max-width: 100%;
    height: auto;
    }

I did exactly that but now it’s way too big. I want it the same width as the text box.

6

Try to set max-width and min-width to different values.
Play around with those values, you should get desired result.

Also, you can set margin property in your css.

This was covered in html/css lessons, review them and try to understand what each property/number changes.

7

I misspoke. I meant remove the width="100vw" from the image caption. Currently your picture is a little wider than the body on my screen. Doing the above makes it precisely 100% of the body. You pass the responsiveness tests.
Now, onto your question:

  • That picture is huge 2560px.

  • You’ll need to set a specific width on #img-div equal to your text box width to shrink it.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.