Archived topic
Column look and layout
3 replies · Started by digitalrenovators on October 8, 2019
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
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;
}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?
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
