[Resolved] Unsure How To Space Block Columns

Home Forums Support Unsure How To Space Block Columns

  • This topic has 7 replies, 2 voices, and was last updated 11 months ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1042629
    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.

    #1042639
    David
    Staff
    Customer Support

    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

    #1042646
    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.

    #1042670
    David
    Staff
    Customer Support

    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.

    #1043052
    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.

    #1043192
    David
    Staff
    Customer Support

    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.

    #1044473
    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.

    #1044532
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.