How to space column boxes among us - by Webacto

This topic has 9 replies, 2 voices, and was last updated 7 years, 10 months ago ago by Eva Kemp

  • Avatar: Webacto
    Webacto
    Participant
    May 8, 2016 at 13:32

    Hello,

    I need to space some box elements (with same background color) among theme.
    Please look at my screenshot.

    http://www.schools-ceilidh.com/wp-content/uploads/2016/05/Schermata-05-2457517-alle-14.16.36.png

    I’ve set 3 column text box with the same layout, but they looks different. (every one have a different height). I need to arrange the same 3 with the same appeareance and with a 5px vertical spacing among us.

    I’ve tried to add a 1px border butbreak the 3 columns layout, I’ve also tried to fix the width colum to 98% but doesn’t work.

    How to solve?

    Thank you

    Please, contact administrator
    for this information.
    8 Answers
    Avatar: Eva
    Eva Kemp
    Support staff
    May 9, 2016 at 10:47

    Hello,

    You’ve added padding values for 2 columns in Text editor http://storage9.static.itmages.com/i/16/0509/h_1462787158_9119319_5dd1ef7def.jpeg , but not for the first one. Remove them or add the same styling for the first column.

    Regards,
    Eva Kemp.

    Avatar: Webacto
    Webacto
    Participant
    May 9, 2016 at 11:20

    I’ve just adding the padding at the first element, now they have the same, but they’re still different.

    Now I’ve set the three in the same way but they have different heights, how to solve?

    I also need to add a vertical space among us, I’ve tried to add a 1px border butbreak the 3 columns layout but breaks colums.

    How to solve?

    Avatar: Eva
    Eva Kemp
    Support staff
    May 10, 2016 at 07:58

    Hello,

    I’ve removed all padding/margin values in the columns and removed extra classes “fondopress”, “fondogrigio” that you added in the row.
    Please clear browser cache and check the page now.

    Show on a screenshot what you want to achieve.

    Regards,
    Eva Kemp.

    Avatar: Webacto
    Webacto
    Participant
    May 11, 2016 at 10:51

    Now I don’t see the 3 box, only its content.

    Where can I set the light gray background color if I want that the 3 box are spaced among us?

    Waiting for you

    Thanks

    Avatar: Webacto
    Webacto
    Participant
    May 11, 2016 at 11:51

    I was trying to put all 3 background box, but in this way they are not spaced.
    I’ve got the same problem. Which could be the solucion?

    I need to reach this result.
    http://www.schools-ceilidh.com/wp-content/uploads/2016/05/Schermata-05-2457520-alle-12.48.59.png

    Avatar: Eva
    Eva Kemp
    Support staff
    May 11, 2016 at 15:11

    Hello,

    Please remove all customizations you made and revert back to the styling that was after I removed additional classes from the row.
    Then let us know so we can start from scratch.

    Regards,
    Eva Kemp.

    Avatar: Webacto
    Webacto
    Participant
    May 12, 2016 at 11:55

    Ok, I’ve remove all the additional classes from the row.
    Only the 3 column have a background-color.

    Can I space them in this way?
    http://www.schools-ceilidh.com/wp-content/uploads/2016/05/Schermata-05-2457520-alle-12.48.59.png

    Please, contact administrator
    for this information.
    Avatar: Eva
    Eva Kemp
    Support staff
    May 12, 2016 at 15:09

    Hello,

    I’ve added custom class for columns – “column-article” and added this code in CSS block of VC editor in the page:

    .column-article {
       padding-right: 5px;
    }

    Please check 3 columns section now.

    Regards,
    Eva Kemp.

  • Viewing 9 results - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.