Off platform project tea cozy

Hi, I’m working on the Tea Cozy project here which is mainly about flex box and I have a few issues:

  • my page is not responsive, I’m using flex wrap, but no item is wrapping when I reduce the screen size. On mobile phone, it displays the page as if it was on a full PC screen, everything is shrinked to fit in and you need to zoom to actually read the content.

  • my .location container is not centered. I don’t understand why as its parent container (main) has the following css:

main{
    position: relative;
    top: 69px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
}

See project here
and see code here

Thank you for your help.

Hi,

The issue here, is not a lack of responsiveness, but that you have specified a minimum width for your divs. So even when you narrow your browser window, the divs don’t shrink as you would like, because they can’t shrink anymore than the 1000 or 1200px you have specified.

Remove these offending lines of code, and see if that helps restore your flex features.

.mission {
    width: 1200px;
}

.feature {
    width: 1000px;
}

.location {
    width: 1200px;
}

Happy coding! :slight_smile:

EDIT: Also, the .mission-text {} section probably shouldn’t be flex. You always want those elements to appear as block level elements, I suspect. So that “Our Mission” is always positioned above the “Handpicked, Artisanally Curated…” phrase.

Hi Serraphus,

Thank you for reading my code and your answer.
Indeed, removing the 1000px/1200px lines makes the page responsive. However, I want the width to be as specified when the screen size allows it. To do that, I added that line:
flex-basis: 1200px;
This worked and made the container 1200px wide when possible but the background image was repeating vertically for some reason. So I also added that line:
background-repeat: no-repeat;
but now the .mission-text item is no longer vertically centered.

I don’t really understand what’s happening.

I’ve also removed the flex property of the .mission-text.

Hi,

After removing the flex property from .mission-text I would then just add a text-align: center; to your .mission

Hi,
Yes I did add text-align: center, which centered the text horizontally. But it’s not centered vertically. See updated code here and page here.