Tribute Page problems

Tribute Page problems
0

#1

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!


#2

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


#3

Actually, an element may have both the width and max-width properties set. Additionally it could even take another property min-width.


#4

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.


#5

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


#6

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.


#7

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 ) …?


#8

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?


#9

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


#10

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.


#11

Thank you for pointing out. I will be extra mindful while checking my code!


#12

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!