Streaming live at 10am (PST)

How to center elements?

I built this simple “coming soon” page for my site, and everything looks fine on desktop.

On mobile portrait I tried to change the width of the block (Logo block) holding the 2 logo images to be 50% width. When it resizes it, it’s left-aligned.

I’ve tried changing the display settings to Flex, but that moved and stretched the images out and didn’t produce the effect I’m going for.

Basically I still need to gain an understanding out how to apply site structure and display settings properly.

Here is my site Read-Only:

Hey Anthony,

Cool looking site!

The reason why your ‘logo block’ was aligning left is because ‘main content’ was set as block.

If you set ‘main content’ to flex -> vertical -> centre horizontally -> centre vertically - you should see it centred.

This would also be a great opportunity to try the Grid layout.

Good Luck!

If you create a new div parent to Logo Block, make that new parent to flex center it.
then set logo block to 50% and it will work

Or you set the Logo Block to Block and use the center element

1 Like

Thank you Janne, that worked.

I was trying to use Flex and the images were getting skewed… and finally realized that I had the Flex Layout set to horizontal when it should have been vertical.