I need help making my code reaponsive to devices

i finished my tribute page but im having trouble . Its not responsive to devices. Could some take a look at my code and assist me?

To help you test, see this for testing on mobile:

A good way to test the responsiveness of an app is via f12 or developer tools. However it’s not straightforward in codepen. I would download something like sublime text or vs code, create an html file with relevant CS file, open up file in browser and troubleshoot via f12

You can just change width to max-width on #main and #tribute-info. Maybe give the #tribute-info a bit of padding as well.

  1. <img-caption> is not a valid element, what you want is <figcaption>. I’d also center the caption text.

  2. I would add a nicer font and increase the font size.

  3. On line: 74 you have a typo (line-heigt > line-height).

use relative units on the width and height properties of the main element, like so:

height: 100%;
width: 80%;

max-width:100%? Also thank you very much :pray:t4:

1 Like

Thank you! Very helpful!

Thank you very much!

Thank you for your assistance

max-width works too, glad I was able to help.

1 Like

You can literally just replace the two widths you have with max-width and it will work just fine still using the px values you have.

That is one of the benefits of using max-width, you can set the value using a fixed unit like px and it will still let the element shrink smaller, but limit its maximum width.

Setting widths in percentages can sometimes get a little wonky. Another option is using the vw unit.

1 Like