Hi All,
I am currently working on the tribute page but having some issues.
Somehow I am not able to set the image responsive.
Can someone please help me and give me some feedback?
Love this community in here, thank you in advance!
You have given the img { } a max-width of 100% and again at the end you have given width as 70%, so what it does.? The width property you set at the end will override the max-width property.
But the test expects max-width, therefore, remove that width: 70% you have set
Actually, an element may have both the width and max-width properties set. Additionally it could even take another property min-width.
What exactly is wrong? The picture is getting smaller as you resize the window. How is the responsiveness not working?
Also, there’re some typos in your CSS.
Change this:
img {
....
}
}
responsive {
To this:
img {
....
}
.responsive {
There’s an extra closing bracket, and you don’t have the dot before the class name.
max-width and min-width can be combined, it points out a range for responsiveness, but when you set width as 100%, it makes the image to occupy the entire container, width is different from max-width and min-width
And the test requires that, the img should not exceed 100% on any screen, you can try it by adding and removing the width props
Have you read her stylesheet? She has max-width set to 100% and width set to 70%. If that’s what the test wants, then what is she doing wrong?
She also has a class on the img tag class='responsive' and in her stylesheet she sets that to 20%. That’s the only clash I see.
Did you resize the browser to see it in mobile screen…?? Does that image cover the full width in smaller screens ( with both max-width and width set ) …?
If the test requires the image to be 100% for smaller screens, then she should have a width: 100% set, and the max-width should be removed. You stated that the max-width should be set to 100% and the width to be removed. Is there a reason for that?
Did you see the margin-left props that is set to the img…? Try giving 100% width and see the horizontal-scrollbar and for the same remove the width and place max-width as 100% and now see it yourself, whether the horizontal scroll bar is visible or not, you can draw the conclusion yourself from that
Note: Do this test in desktop version not in mobile screen, there are some margin issues in smaller screens that makes the horizontal scroll bar visible
Hmm… What you’re saying is correct, but the CSS is not constructed well. A quick solution to this would be to add box-sizing: border-box to the image wrapper (or the image itself) and to add a media query for screens larger than xxx with the width set to something like 70%. Then both a max-width and width property can be set without any horizontal bar.
Thank you for pointing out. I will be extra mindful while checking my code!
Does it means width > max-width and min-width? Or is because the number I used overwrite it? Thank you for your reply. You two has helped me find out where the problems are!