Responsive Landing page using CSS Flexbox

Community feedback

• 

  Kitty10206•100

  @Kitty10206Posted about 2 years ago

  Hi Jaybae!

  I just had a quick look at your CSS and it looks like you did the same thing I did before. Your media queries are only covering 0 to 375px and 1440px+. I know it says in the challenge that the examples are 375px for mobile and 1440px for desktop. You started by setting up the mobile-layout, right? This means you already coded for the max-width of 375px, and you don't actually need a media query for this. Then you have to decide at what width the desktop design starts, and set up a media query for this. For example, a min-width of 700px (definitely experiment, some designs work better in higher widths than others). Then, every screen bigger than that would see your desktop design. You don't necessarily have to set both and min- and a max-width unless you also want a special tablet version. But if you put a media query at about 700px, it will make your transition work.

  Your media queries: @media screen and (min-width: 1440px) @media screen and (max-width: 375px)

  An example that might work (you would put this query where your current desktop query is): @media screen and (min-width: 700px)

  I hope this helps! Kitty :)

  Marked as helpful

  2

  ---

  

  Jaybae•20

  @Jenny3094Posted about 2 years ago

  @Kitty10206 thank you so much this. It clarifies my problem. I truly appreciate.

  2