Link to the project or level: https://codeprojects.org/nzT802y-PDbpAJ-xm-h6CDPITOYsS7NNAtEaCOl4yL4
What I expect to happen: When resizing the Chrome window, I expect the horizontal line
What actually happens: As we resize the window, the horizontal stays the same place and doesn’t respond to the changes, staying with the same section, same image.
Hi @zarehmohazzaba,
Do you have a link to the Web Lab project for this page? It’s hard to troubleshoot without seeing the underlying code.
Thanks!
–Michael K.
@zarehmohazzaba
That’s a tough one! I played with it and I know it has something to do with all of the div tags and where the hr is placed within them, but I cannot get it to work the way you described. I’m half tempted to say to switch it to a table! Hopefully someone will have a better idea than that for us! 
What they’re trying to accomplish here is “responsive web design” where the site looks similar across multiple devices.
It can be tricky because every element has to be styled to be responsive for it to work.
If they google responsive image galleries, there are a number of sites that will offer code snippets to help create layouts that will work well on a number of different screens.
In this case, if you style the <hr> tags on the style sheet with some relative sizing, it could get them what they were after.
I used this code on the style sheet and think I have it closer to what they want …
hr {
width: 95vw;
height: 2vw;
}
Give it a shot and see if that helps get you closer. If they want to read more about relative sizing and about the vw (viewport window) here’s a link: https://www.w3schools.com/CSSref/css_units.asp
Hope this helps!
Mike