Kevin Powell - Community•4d ago

Why is there gaps on both sides of the children in this flex container ?

Can someone explain me this?

25 Replies

i_lost_to_loba_kreygasm•4d ago

Its the first child , I thought gaps only applied on the front that is 1 direction

b1mind•4d ago

That looks like spacing not gap? Helps if you share code

i_lost_to_loba_kreygasm•4d ago

its row gap I swear and I can't share code because its made in web flow but i can share the the demo link for website, so you can inspect

MarkBoots•4d ago

is there a element with 0 height before play maybe? you can just inspect element

i_lost_to_loba_kreygasm•4d ago

there is no element or another child i can share you the html

MarkBoots•4d ago

html and css we need

i_lost_to_loba_kreygasm•4d ago

https://zapify-77bb67.webflow.io/ here is the website lemme share you the css and html

MarkBoots•4d ago

this will be fine.

i_lost_to_loba_kreygasm•4d ago

wait dont open it

<div class="w-layout-blockcontainer video-container w-container">
  <div class="text-block-8">PLAY</div>
  <div class="div-block-51">
    <img src="someimage.png 667w" alt="" class="image-41">
  </div>
  <div class="text-block-8 text-block-video">VIDEO</div>
</div>

<div class="w-layout-blockcontainer video-container w-container">
  <div class="text-block-8">PLAY</div>
  <div class="div-block-51">
    <img src="someimage.png 667w" alt="" class="image-41">
  </div>
  <div class="text-block-8 text-block-video">VIDEO</div>
</div>

.video-container {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: flex-start;
  align-items: center;
  max-width: 1670px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .video-container {
    grid-column-gap: 75px;
    grid-row-gap: 75px;
    flex-flow: column;
  }
}

.video-container {
  grid-column-gap: 60px;
  grid-row-gap: 60px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row;
  justify-content: flex-start;
  align-items: center;
  max-width: 1670px;
  display: flex;
}
@media screen and (max-width: 991px) {
  .video-container {
    grid-column-gap: 75px;
    grid-row-gap: 75px;
    flex-flow: column;
  }
}

i_lost_to_loba_kreygasm•4d ago

ignore the grid properties 🙂

MarkBoots•4d ago

if i have to ignore it, please remove it. some grid/flex properties are shared. it can interfere

i_lost_to_loba_kreygasm•4d ago

they dont , otherwise the dev tools would not show them that they are inactive ?

MarkBoots•4d ago

i think its happening inside .text-block-8. but it would be really more usefull to have something live to play with

i_lost_to_loba_kreygasm•4d ago

i can help you with that

MarkBoots•4d ago

this is to difficult from just a few snippets and screenshots. I can't help

i_lost_to_loba_kreygasm•4d ago

turn the home-2 class to display block

i_lost_to_loba_kreygasm•4d ago

I am trying my all to help you understand 😦

Mannix•4d ago

I'm not getting the same result as you

i_lost_to_loba_kreygasm•4d ago

WTF

Mannix•4d ago

if there is no extra element maybe you have pseudo element ?? those are counted in flexbox to

i_lost_to_loba_kreygasm•4d ago

i think you are onto something

i_lost_to_loba_kreygasm•4d ago

yeah you are right 🙂 thank you for solving the mystery I swear I didnt add them in css , I hate working in webflow , feel like it adds unnecessary styling or markups 😦

Mannix•4d ago

:thumbup:

vince•3d ago

I didn't know this 👀

Gaming

Programming

Why is there gaps on both sides of the children in this flex container ?