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

To help you test, see this for testing on mobile: [image] Restaurant-Survey Form Code Feedback Here’s a short vid I made on testing a pen on mobile (no real phone required, this only simulates it):

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. <img-caption> is not a valid element, what you want is <figcaption> . I’d also center the caption text. I would add a nicer font and increase the font size. On line: 74 y…

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:

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

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 maxim…

I need help making my code reaponsive to devices

Curriculum Help

Steffan153 July 13, 2019, 11:01pm 2

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

Topic		Replies	Views
Tribute Page - Feedback! I Built This	6	586	May 8, 2020
Reveiw on my Tribute page I Built This	20	1427	May 24, 2020
Feedback on survey form and tribute page I Built This	5	792	March 30, 2020
Building a tribute page I Built This	6	1309	November 20, 2018
My Web Design Project Build a Tribute Page I Built This	35	1470	June 25, 2021

I need help making my code reaponsive to devices

Related topics