Column look and layout

[Richard]

Hi, would like to make my columns look like this – https://mentalhealthsolutionsinbusiness.com/memberships/ (colours etc) – how do i do that please? Current ones look very bland and make everything look equal in terms of width / height etc, thank you

[David]

Hi there,

takes a little bit of custom CSS work, i can point you in the right direction.

1. Within each column you want to add a Group Block ( which you will move the other blocks inside of ). With the Group Block selected, in the settings sidebar > Advanced > Add an Additional CSS class of: column-group

2. Repeat this for each of the columns. The Group block provides you with the option to change its background color.

3. Add this CSS:

/* Add padding to column group */
.column-group {
    padding: 30px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Force buttons to align to the bottom */
.column-group .wp-block-button {
    margin-top: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Richard]

Hi, thank you so much for that – I’m still struggling to do this – as I have followed that and it is still not changing for me – any ideas please?

[David]

Might be best starting from scratch:

1. Add Columns Block.
2. In the first Column – add a Group Block.
3. With the Group Block selected, go to the Settings Sidebar > Advanced andd add the CSS class o provided above in the Additional CSS field.
4. Set the Group Block Background color.
5. Add your other blocks inside the Group block.

Publish and see if you now have a background behind the column content.
If so add the CSS i provided above in the Customizer > Additional CSS

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts