[Resolved] Spacings issues with my sidebar element

[Derek]

I have recently followed Leo’s video on creating a sidebar block element but the spacing of my name and the text below as well as the social icons all seem to be pushed to the right. I have made the sidebar element 300 pixels wide and matched that width in the customizer field. I have the link below where you can see my sidebar in the posts.

[David]

Hi there,

theres a few things that will need unpicking here, in the construction of that element.
One of the main considerations will be constraining the width of that element. And it looks like width of 300px is what you’re current design is kinda working towards.

1. Select the parent Container Block:
1.1 In Layout Set:
1.1.1 Display > Flex
1.1.2 Flex Direction -> Column
1.1.3 Align items -> Center
1.2 In Sizing set the max-width to 300px.

2. The first child container you have contains a background image.
2.1 In the blocks Toolbar the Full Width option is selected. Uncheck that.
2.2 In Sizing – change the Width to 100%. This will now fill the width of the parent container.

3. Select the next child container that has the avatar, social links text etc.
3.1 In Sizing – set the Max Width to 100%.

At this point the content should all be aligned centre within the 300px wide parent container.
If need be you can adjust the Parent Containers ( in point 1 ) Max Width.
NOTE, the sidebar is set to occupy 30% of the parent container in the Customizer settings, so its max-width on big screens is 379px.

4. Inside that last Container you have several blocks.
4.1 The first headline block:
4.1.1 Set the Text alignment center.
4.1.2 in its Spacing remove the Left Padding.

Apply that logic to other text blocks.

4.2 the Container with the social icons inside,
set its Layout > Flex Wrap to on, this will allow the icons to create new rows if needed.

[Derek]

Hi David,

Thanks so much. I think that has fixed the problem except where you said this:

2. The first child container you have contains a background image.
2.1 In the blocks Toolbar the Full Width option is selected. Uncheck that.
2.2 In Sizing – change the Width to 100%. This will now fill the width of the parent container.

There doesn’t seem to be a Full width option on the right toolbar menu. It look ok now anyway so maybe it will be right.

[David]

In the blocks Toolbar the Full Width option is selected. Uncheck that.

See here:

Glad to hear its working

[Derek]

THank you

[David]

You’re welcome

[Author]

Posts