Placing img element in flexbox and making responsive

I have tried to create a project that contains a black background and two div containers, one which has a centered image inside. I wish for it to resize responsively and for both div elements to jump to 100% when the screen is less than 600px.

A link to my code… https://codepen.io/conicbe/full/EpQBLO/

  1. why does my media max width not make any difference with flexboxes?
  2. How can I make it so that my main div elements stack responsively on top of each other?
  3. why does putting top and bottom margins on the .main class not have any visible affect on spacing?

Any advice for resolving these problems would be greatly appreciated. I have been trying to fix this for the last few hours…haha :roll_eyes:

  1. Can you describe, what you think, what max-width should do?

  2. If you want to stack b1 at the top and b2 under it,
    you can change the flex-direction when your media queries kicks in.

  3. For me, the margin on the main is working.
    You can see that by opening Dev Tools (F12) and (un)checking it in Elements => Styles => margin

1 Like

For Qns: 1 & 2 => In your media query just add

.main 
{ 
  flex-wrap: wrap; 
}

Qn: 3 If you check via Dev Tools as said by @miku86 you can see the difference

1 Like
  1. I understand that max-width sets the maximum width a page can go up to.
  2. Changing flex direction worked perfectly.
  3. Beginner mistake. :stuck_out_tongue: I was adjusting the margin but it wasn’t creating the behaviour I wanted.

Thanks so much

Thanks for the help everyone.

I have made these small changes and now my section of code is responsive. Here is a copy to my modified codebase. Hope this can help somebody else. https://codepen.io/conicbe/full/KBoeMj/