Tea Cozy

I’m currently trying to do the tea cozy project on my own computer, and I’m stuck on something. When I resize the browser, by that i mean when i shrink it. The part containing locations of the tea cozy store doesnt look as its supposed to. The background isnt covering all of the flex items. Does anyone know how to fix this? @andela1641 help :joy:

Haha hi! I’m happy to say I can help again lol
So on a full screen, the width of the locations div is supposed to be 1200px. So max width is set to 1200px. Height is set to 500px.
And then to get rid of the issue you’re struggling with, you have to make a media query to make the background image of #locations resize proportionally as we’re shrinking the browser window.
Among the other properties that I haven’t added in this snippet of code, you must add height: max-content;
That way the height of the background photo will cover the maximum amount of content, and not just a part of the content.

Lets say we are making a media query for max width of 1100px:

**@media only screen and (max-width: 1100px) {**
**    **
**        #loc {**
**        max-width: 1200px;**
**        **
**        margin: auto;**
**        background-image: url("images/img-locations-background.jpg");**
**        background-size: cover;**
**        /* stretches the height when the browser shrinks, so that it fits max amount of content*/**
**        height: max-content;**
**        **
**        **
**        **
**        **
**    }**
**    **
**}**
1 Like

I hope I wasn’t too confusing with trying to explain, if I was then feel free to ask me if you didnt understand some parts

O M G !! THANK YOUUUUUUUUUU :DDDDD
It worked!!! :smiley:

1 Like

Yay!! You’re welcome :smiley: