[Support request] Column look and layout

Home Forums Support Column look and layout

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1029156
    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

    #1029229
    David
    Staff
    Customer Support

    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;
    }
    #1029466
    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?

    #1029490
    David
    Staff
    Customer Support

    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

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.