Background shows up between divs with flexbox and a media query

For some reason, a small part of the background picture (almost as if there was no border between divs at all) is visible when I use a media query and flexbox. I tried changing the borders and the like, but it isn´t budging. I really can´t wrap my head around it. In the picture, it would be the one that has “New York” on it.

Can you use any online ide like codepen or codesandbox and share link so it can be better to debug your problem?

Yes! https://codepen.io/HernanF/pen/exbzxQ

The problem happens when the boxes stack up

one thing you got going is your icon code
to use the font awesome icons your code should look like this:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

    <div id="icon"> <i class="fa fa-search"></i></div>
  </div>

first part links their css to your page
then the icon class ie. fa fa-search inserts the icon you want to use
image

I know. It´s a React app. The codepen is just to show the problem.

exactly what i did just now, well i still don’t understand what the OP is asking for?

If you force the boxes to stack up, you can see the background color between the divs. I don´t want this to happen. Tried adding more borders, but no dice:

This might not be much help but the problem is not showing up with what you posted in codepen so I would say the bug is in whatever elements of your project are not included in what is on codepen.

1 Like

That last screenshot was of the codepen.

Even i cant see the margin when i did exactly the same with the screenshot, so the issue is with your browser maybe

If you open the codepen, press F12 and shrink the screen, you can´t see the red background between the boxes?

i told you, i replicated the screenshot in my window and they all stack up nice and clear, should i post the screenshot?

Yes, please. Are you sure you can´t see a red line between each of them?

Sorry buddy, now i see the red line when i open the responsive mode in chrome, let me look and revert to you shortly

Ok the line is only visible in the editor mode and not in full screen mode so I guess thats not a problem.

No, they show up on my cellphone too.

Ill confirm. and look at the screenshot I posted no red line

Press F12 and shrink the screen on the codepen.


no lines…weird?

Yes. Dunno why it´s happening.