Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

using nested flexbox but media query cant seem to work, help please

@fangyinglim

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


hi I'm having problems with my media query, i can't seem to get it to work in flex-direction:column.

i understand another alternative will be to use flexbox grid, but i would like to figure out why my code isn't working for mobile.

any solutions or suggestions are welcome, thank you!

Community feedback

@despotes

Posted

Watched the code and your problem on flex-direction: column; in your master branch you didn't change the value:

.flexbox {
  height: 100vh;
  width: 100vw;
  max-width: 1440px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex: 1 2 1080px;
  margin: auto;
}

@media screen and (max-width: 375px) {
  .flexbox {
    flex-direction: row; // this value need to be column
  }
}

Marked as helpful

0

@fangyinglim

Posted

@despotes hi i changed flex-direction to column, but it still doesn't shrink when width is 375px :( any idea why?

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord