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:
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.
Thank you for the feedback. I have removed the /html and fixed other issues but the image is still not working 
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.
thank you Dashi. I will rework it
No worries happy coding!
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.
When setting the flex-direction to column how the properties justify-content and align-items affects the child flex items switch around.
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?
<div id="img-div" style: align="center">
This part…
style: align="center"
…on the div isn’t doing anything.
<div id="img-div" style="color: red; background: green;">
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.
Thank you very much @lasjorg learned a lot from the link you sent! I was able to fix the code.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.