[Resolved] Unsure How To Space Block Columns

[Andre]

Hi! Hope I can get some help.

I’m trying to contain a signup form (which is represented by the blue square) inside the background image in mobile view as well as desktop. At the moment I’ve used the “cover” style attribute with the background image but the issue is it doesn’t let me space the block columns with the icons outside / underneath the background image it just manipulates the spacing of the block columns WITH the background image.

How can I style the background image so the blue square stays inside the background image in mobile view and I am able to space the column icons with the text underneath separately?

Thanks a lot.

[David]

Hi there.

just to be clear:

1. For desktop – 2 columns ( left: icon list / right: form ) to sit over background image.
2. For Mobile – Columns to stack, Form on top with background image, icon list below without background image

If that’s correct then its going to be tricky – let us know

[Andre]

Hi David. For number 1. Yes 🙂 For number 2, You almost got it correctly, Here is an example of what i mean. I’m sure you’ve seen it plenty of times but instead of the list below id like it to stay on top with the form below…Form AND list (not the block icons) on top the background image in mobile.

[David]

First thing will be to deal with the layout and make the background image a part of it.
To do this we need to group those blocks together.

1. Add a Group Block
2. Move your text blocks ( “Make money… Apply these… ) and the Columns Block inside the Group Block.
3. Set your Group Block to Align Full. Set your Columns block to normal width ( not full or wide ).
4. Select the Group Block and in Sidebar settings > Advanced > Additional CSS Classes give it a class name eg. hero-block

When you done that i can help with some CSS to style it and organise the columns.

[Andre]

Thanks so much David. I managed to complete most of what you suggested only there wasn’t an option to set columns to normal, do you mean I need to use css and align it to normal?

Apart from that I attempted to complete some things myself. I hope it doesn’t complicate things for your suggestion. The css class of the group block is named groupblock.

Looking forward to your help.

[David]

OK first thing is to remove the background image you have already added, as this is gonna be added to the group block:

/* Give the group block some padding */
.groupblock .wp-block-group__inner-container {
    padding: 40px;

}
/* Add background image to groublock */
.groupblock {
    background-image: url('https://howtomakemoneywithawebsite.org/wp-content/uploads/2019/10/background1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/* Adjust mobile padding and make columns stack */
@media (max-width: 768px) {
    .groupblock .wp-block-group__inner-container {
        padding: 20px;
    }
    .groupblock .wp-block-columns {
        flex-direction: column;
    }
}

You’re gonna need to adjust font-sizes and line-height for your text particularly on smaller screens.

[Andre]

Thanks so much David, I’ve figured out how to style the rest myself. I would be still frustrating myself with that background image issue today. Thank you so much.

[David]

Glad to be of help

[Author]

Posts