Need help with centering elements in mobile viewports

Hope someone can help.

I’m having trouble with auto-centering a component of my site.

They are divs within a container. If you have a look on the ‘partners page’, under any view smaller than desktop, you will see that they sit to the left of the screen rather than centered within the container.

https://preview.webflow.com/preview/monitor-6-5426d28978582cc8f4d33aa3833a0?preview=173466e9376d8a28277d9ec2c47ad952

Could someone possibly tell me why?

Thanks

Pete

Hi. Cool Flexbox can help you center your boxes.

Try this:

  1. At your Partners page, click/select PartnersMainContent and make sure you are on Style tab window after that
  2. Position - Display Settings, click/select Flex
  3. Under Flex Layout, click/select Justify: Center
  4. Get down a bit, there is Wrap Children checkbox, click/select it
  5. Tadaaa :slightly_smiling:

Cheers

Hey,

Thanks for the suggestion. I tried that but it would then stack them all on top of each other. They were centered, which is a start, but there was room next to it for another box.

Pete

@peted83

Just to confirm that we get same result here. This is what I got. If this is not what you trying to achieve, can you please describe it in more detail what it is.

Hey!

Tried this again and it worked, I must have not ticked ‘wrap children’ the first time. You’re an absolute star. Thank you very much for your help.

Pete :smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.