I need help making my code reaponsive to devices

HTML-CSS
1

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?
https://codepen.io/Takudzwa95/live/GbeLvB

2

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

3

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

4

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).

5

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

height: 100%;
width: 80%;
6

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

1 Like
7

Thank you! Very helpful!

8

Thank you very much!

9

Thank you for your assistance

10

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

1 Like
11

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