[Resolved] styling gutenberg columns

[Pauline]

Hi

I am really puzzled about something. I have styled a block using css that I have put in Appearance/Simple Css. This has been fine. I have then tried to style a similar block with a different style in the Simple CSS window that appears at the bottom of the page, but it does not work. Where am I going wrong?

In Appearance/Simple CSS I have:

.firstsection {
    margin-left: 100px;
}

.firstsectionheading {
    font-size: 45px;
    margin-left: 100px;
}

And on the page I am working on, in the Simple CSS window I have written (I am trying to style a similar block underneath the first block):

.secondsection {
    margin-left: 100px;
}

If you look on my page, you will see that the first section with text is aligned with a right margin, but the second section is not.

I’d be really grateful if you could explain where I’m going wrong.

Pauline

[Leo]

Hi there,

I don’t see the .secondsection block of CSS showing up in the live site at all.

Can you make sure there is no syntax error?
https://jigsaw.w3.org/css-validator/

When there is a syntax error somewhere in the CSS, it stops all the code below the error from working.

Let me know 🙂

[Pauline]

Hi Leo

The CSS for .secondsection is the ONLY CSS in the Simple CSS window on the page.

I tried putting the .secondsection CSS into Appearance/CSS (as opposed to the Simple CSS window on the actual page), and a paragraph margin DID appear, but it was not the same width as the .firstsection paragraph, even though the margin width is the same (both set to 100px).

I suspect I’m doing something fundamentally wrong – perhaps this is not the best/correct way to add margins to content within a gutenberg column?

[Leo]

I would try adding the class to the columns themselves instead of adding it to each headings/pragraph.

[Pauline]

In your opinion would I be better off using Lightweight Grid Columns for this purpose?

[Leo]

Gutenberg columns should be the way to go.

I would recommend adding the custom classes to the columns blocks themselves instead of the paragraph/heading tags.

[Pauline]

Can you tell me the syntax for styling individual columns? If I style say:

.wp-block-column {
padding-left: 100px;
padding-right: 100px;
}

It will apply this to all columns.

I gave a class called “firstsection” to a column (via Advanced, Additional CSS), and then tried to style it as follows:

.wp-block-column firstsection {
padding-left: 100px;
padding-right: 100px;
}

but it had no effect.

Thanks.

[Leo]

It would be:

.wp-block-columns .wp-block-column.firstsection {
    margin-left: 50px;
}

You can see the levels from browser inspector tool:
https://www.screencast.com/t/gUMqyR0Ue

[Pauline]

Thanks Leo. That’s moved me forward & I have learnt a lot from your reply.

I have another question:

When I view the site in mobile view, after the Page Hero, there are 2 images, one under the other. The second image is offset to the right – I want to align the images neatly.

I know this is because in desktop view, I have aligned the first image to the right, and the second to the left (which in desktop view looks fine).

I have identified the image in the inspector as: img-wp-image-37. I have also given this image a class of .circleright

The HTML appears as:

<div class="wp-block-image circleright"><figure class="alignleft"><img src="link to image" alt="" class="wp-image-37"/></figure></div>

I would really be grateful if you could give me the correct CSS syntax to budge this image in mobile view, as I’ve tried various combinations of CSS (all under the correct @media (max-width: 768px) heading, but have had no success.

Many thanks.

[Leo]

Any chance you can open a new topic for the separate question?

Thanks 🙂

[Pauline]

Will do 🙂

[Leo]

Thanks 🙂

[Author]

Posts