CODEWITHSUNDEEP
htmlcsswordpress
zero
zero

Reputation: 1217

big Margin In Twenty-Twenty Theme (TT): How to customize this?

i have set WordPress-site with a gutenberg block in the theme twenty-twenty: i did it according to Mike Haydons manual see: https://www.intelliwolf.com/how-to-make-a-four-column-layout-in-gutenberg/ "How To Make A multi Column Layout In Gutenberg"

Mike states:

To make a x column layout in the WordPress Gutenberg editor, select the x column layout, Start by choosing the "Columns" block. Assuming you want four equal columns, choose the three equal columns variation. It's the 66 / 33 one.

the question: how to set the width of the column!? Should i do this via Appearance/Simple Css?! Some of my friends told me that this would be possible: see the image with the two column layout: 66,6 / 33,3 %

the column settings are quite worse - see the site: https://www.job-starter.com - which is truely beta-beta.

what makes me wonder is; why do i have

a. such a big border 
b. see the margin that i have here 
c. note that i have added a wp-job-manager-plugin with some demo job-listings

enter image description here

all looks pretty awful and i wonder how to get a better layout. all the elements are centered in a very high grade - nothing is arranged - and i have a awesome big margin

how to solve this in the theme twenty-twenty (TT)

all looks pretty awful and i wonder how to get a better layout. all the elements are centered in a very high grade - nothing is arranged - and i have a awesome big margin

Upvotes: 0

Views: 821

Answers (1)

Ivan Karpushchenko
Ivan Karpushchenko

Reputation: 155

I don't see the border that you are talking about but I can explain about the weird width. First of all, it is not a margin actually but a limited width. Looking at the elements of the page, we can notice that they have this style:

.entry-content > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: 58rem;
  width: calc(100% - 4rem);
}

And searching the source code of the theme, you can find that this style is hardcoded.

I can recommend you a couple of solutions:

  1. Changing a page template to have an adequate container width ( the wide one is called Full Width Template, please check the screenshot Template selection

  2. Overriding the style with your own sizing ( but remember that selectors here are too heavy like in the CSS snippet above. You can try using the same snippet with different sizes that will fit your expectactions.

  3. You can create your own template using a child theme

Upvotes: 1

Related Questions