Tribute Page Challenge - Image not responsive

HTML-CSS
1

Hello,

I can’t find what’s the problem with my code. It says that my image is not responsive to the media query. I tried what I learned using @media as part of CSS, but it does not seem to be working. Please help me.

My code so far
Here’s my code:

Build a Tribute Page

Link to the challenge:

2

Hi,

What I saw is that your html file looks very complicated. It starts with

main

and ends with

/html

You can check your html code → here.

and I guess it shouldn’t be almost same to the example. Just change the content.

3

Thank you for the feedback. I have removed the /html and fixed other issues but the image is still not working :frowning:

4

Well I guess removing /html is not enough. As I check again your code in the ling I provided it throws so many nesting errors.
Iwould recommend to you to re-code the html file with care of nesting rules. Because which element is the parent and which is the child are not clear.

1 Like
5

thank you Dashi. I will rework it

6

No worries happy coding!

8

  1. This selector isn’t correct img.center. For that to apply its CSS the img element would have to have a class of .center applied to it, which it does not.

  2. When setting the flex-direction to column how the properties justify-content and align-items affects the child flex items switch around.

1 Like
9

thank you for the feedback. I edited the code again and saw that it was better that I put this code

style: align="center"

as part of the

<div id="img-div">

what are the other proper ways to do this in CSS?

10 
<div id="img-div" style: align="center">

This part…

style: align="center"

…on the div isn’t doing anything.

  1. If you want to use inline styles, which you really shouldn’t and should avoid, you do it like this (using color as an example).
<div id="img-div" style="color: red; background: green;">
  1. align isn’t a valid CSS property (list of valid properties).

You can center elements in a lot of different ways. Here is a css-tricks article.

1 Like
11

Thank you very much @lasjorg learned a lot from the link you sent! I was able to fix the code.

12

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