Problems with my 2nd tribute page issues with user story #9

I tried adding a responsive-img class to my img element and setting the max-width property to 100% and the height property to auto but nothing happened and I failed the test, also I originally had my css on the html section and everything was centered correctly but when I copied my css & moved it to the css section my h1 element wasn’t centered anymore. Any help would be appreciated.2nd tribute page

Remove the style tags around the css when you move it to the css section. Coz all those tags like html, head, style, script, etc. are all in-built in CodePen editor and taken care of by it.

To make the page responsive, you need to use media queries. Also using relative units in terms of viewport like vw and vh to size your img-div would help. Coz although the img occupies maximum100% of the img-div, the page and the img-div itself need to be responsive.

1 Like

I removed the style tags and that fixed that problem but I’m having difficulty applying the media queries and relative units like you suggested. Some examples might help it sink in more.

here are docs with live example that you can mess with:

CSS @media Rule (w3schools.com)

here is an article from fCC with practice if you want:

Learn CSS Media Queries by Building Three Projects (freecodecamp.org)

max-width property to 100% and the height property to auto but nothing happened

for max-width and min-width to take affect there should be a width property in the class something like this

.class {
width: 10vw;
min-width: 15em;
max-width: 45em
} 
1 Like

I took a look at the Tribute page challenge and it is not necessary to add media queries to pass the test. Also, what you had done is right. You need to add max-width: 100% and height: auto to your smaller-image class to make the image responsive.
But the reason why you are failing could be that you had not center aligned the image. That is the last requirement for the project:
image

Setting a property of margin:auto helps center align an image within its parent element.

Adding the correct properties to the smaller-image class did the trick. Thanks for the help.

1 Like