[Resolved] background color to a gutenberg block

[Pauline]

Hello

Is there a way of filling a whole gutenberg block that contains columns, with a background colour and padding it out so that the colour extends to a border?

I have a gutenberg block which contains 2 columns. The left column has an image, and the right column has text. I have only been able to succeed in adding a background colour to the right column (text).

The left column (image) has the following CSS:

.wp-block-image .wp-image-138 {
    margin-left: 150px;
}

And the right column (text) has the following CSS:

.bluetext {
    margin-right: 125px;
}

If you look on my site, it is the block underneath the page hero.

Thankyou
Pauline

[Leo]

Hi there,

You will need to target the entire columns block like this:
https://www.screencast.com/t/5mzd4dSg

Give that columns block a specific class if you don’t want to change the background color of all the columns.

I’ll also mention that these aren’t really theme related questions.

If you are struggling editing things with HTML and CSS, I would recommend look into a page builder option 🙂

[Pauline]

Hi Leo

Thanks for the screenshot. I really do appreciate your time and help. I have used Elementor before with GP, and it’s really easy to come up with a good looking site. However, through this experience, I have come to learn of the functionalities and capabilities of GP, and I am currently trying to learn how to use GP without a page builder. Once I “get it” I know my struggles will have been well worth it for the long term.

Is there a service that can help me with the questions I have been asking? I just get stuck sometimes, and just need someone to help me move forward.

Thankyou
Pauline

[Leo]

I’m not aware of service for general HTML and CSS help unfortunately.

I learned the basics using the free lessons from this site:
https://www.codecademy.com/

Then it’s all about getting familiar with browser inspector tool 🙂

[Author]

Posts