Streaming live at 10am (PST)

Changing the basis % on Flex children has no effect


#1

I’m designing a webpage in which I have a Flexbox named “Flex Brands” that spaces five logos evenly in the Desktop view:

On Mobile Landscape view I set the Basis setting for the individual flex items (the logos) to 50% with the intention of making them 2 per line, for a total of 3 lines. But doing so has no effect on them. They’re still all scrunched together on the first line:

Could anyone suggest what I might be doing wrong, or neglecting to do?

Thanks.


Here is my site Read-Only: https://preview.webflow.com/preview/erica-therapy?utm_source=erica-therapy&preview=cc4e19f19262106c01a5672fdcd3b0ba


#2

Hi @Chuck_Braman

Here’s a quick video:

And here’s the step by step:

  1. Check Wrap children on Flex brands
  2. Wrap all your logos in a separate div with the same class (flex basis in the video)
  3. On mobile landscape, select flex basis div and give it a basis of 50%
  4. Make the flex basis div display flex
  5. Select the logo image and remove its basis (so the basis is only set on flex basis div)
  6. optional You can give the flex basis div some padding
  7. On mobile portrait, repeat step 3 to 5 with a basis of 100% instead of 50%

Hope this helps! :slight_smile:


#3

Thank you @donaldsv.

That was really fast, clear, and helpful.