Product Landing Page: Needs help with Media Query

HTML-CSS
#1

Tell us what’s happening:
Hello! Just finished this assignment, and I did some research but I just cannot make the media query work, when minimised, the nav bar overlaps the body, and the flex boxes don’t wrap…

@media (max-width: 768px) {
display: fixed;
width: 100%;
.flex-container{
flex-wrap: wrap;
}
}

Would appreciate your input and also please comment/ advise on my site, thank you!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

have you tried changing the flex-direction to “row”?

#3

You can only use flex-wrap if the container you are applying have display flex on it already. So try to put display: flex; in the container you put flex-wrap in.

#4

I tried it in the media query, and flexbox, and both… it didn’t seem to change the way it minimises

#5

Changed it in the media query… looks same

#6

edit your media query as shown below:

@media (max-width: 768px){
body{
display: block;
width: 100%;}
.flex-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;

}
}

and also your flex-container as below:

.flex-container{
display: flex;
flex-direction: row;
justify-content: center;
}

the issue should be fixed then.

#7

Hey @elijahetido,

  • It’s great that you found the solution to the problem, but we are trying to cut down direct code solutions in the forums. We don’t want people to just come and copy paste your code. We want them to try it themselves. It’s fine to direct them and give them hints. but please don’t give direct code answers.
  • Next time you want to showcase a code, use the ``` backtick so it is easier for everyone to read.
    See this post to find the backtick on your keyboard.
    The “preformatted text” tool in the editor (</>) will also add backticks around text.
    Pre-formatted-text
    Pre-formatted-text1356×380 401 KB
#8

It did the trick, thanks!!

1 Like
#9

Thank you. The correction is well noted.

1 Like