Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 13, 2017 at 11:00 pm #807667
    nicosec

    Hi There,

    How can I control the amount of spacing between columns in a color row?

    Thanks!

    June 13, 2017 at 11:55 pm #807681
    Jordan Shannon

    Hey nicosec,

    This can be done via css. Please provide a link to the site so we can inspect the page.

    Best regards,
    Jordan Shannon

    June 20, 2017 at 1:03 am #810074
    nicosec

    Hi there.
    You can find the section on https://www.shamanism.com/programs/west-virginia-shamanic-retreat

    If you scroll down to the “Retreat Experience” section, you will see 3 columns of images/text. We want these to have smaller space between them – and to also have the bottoms of the gray sections aligned horizontally. Right now, each section is a different height.

    Please advise
    Thanks

    June 20, 2017 at 1:18 am #810080
    Jordan Shannon

    Hi,

    Add the following to quick css:

    #av-layout-grid-5 .flex_cell.av_one_third{
padding:10px!important;
}

    To make the the same height edit your first column element inside your color section and then choose Equal Height in “Equal Height Columns”

    Best regards,
    Jordan Shannon

    June 22, 2017 at 8:48 pm #811817
    nicosec

    Hi Jordan,

    Thanks for that code. However, that seems to affect all color rows across the site, which I don’t want. I just need it to affect this one instance.

    Greg

    June 22, 2017 at 10:35 pm #811851
    Jordan Shannon

    Hi,
    If you add a unique id to the color section you want to change, then we can target just that one.

    Best regards,
    Jordan Shannon

    June 28, 2017 at 1:30 am #813660
    nicosec

    Hi Jordan,

    I added the unique id to the color section but it is not working with the code. This might be because I moved some things around?

    Can you please take a look at the page again? I added some notes in red in the section in question.

    Thanks!

    June 28, 2017 at 3:57 pm #813912
    Jordan Shannon

    Hi,

    That section would have to be built similar to the one below it for it to work via css. They need to be individual cells.

    Best regards,
    Jordan Shannon

    June 29, 2017 at 8:33 pm #814666
    nicosec

    Hi Jordan,

    OK, let me clarify exactly what I need … I need to create a section that:

    1. has custom padding on the left/right
    2. Fills the page width 100%
    3. has equal height boxes that are dynamically made equal (not done by setting the height)

    The trouble seems to be that to get 1&2 to work, I need a grid row. But to get #3 to work, I need a color box. Am I missing something? How exactly can I do all 3 things?

    Thanks
    Greg

    June 30, 2017 at 6:02 am #814796
    John Torvik

    Hi,

    Please, could you provide to us your WP credentials and the website link?

    Best regards,
    John Torvik

    July 3, 2017 at 8:53 pm #816054
    nicosec

    See private content

    July 4, 2017 at 8:58 pm #816477
    Jordan Shannon

    Hi,

    I think the easiest option to achieve #3 would be to add space. Use the Separator/White Space element to make it seems like they are of equal height, could you try that out to see if it works out?

    Best regards,
    Jordan Shannon

    July 6, 2017 at 10:20 pm #817513
    nicosec

    Hi Jordan,
    The problem with that solution is that depending on the width of the user’s monitor, the heights will always be changing.

    July 7, 2017 at 4:41 am #817575
    Jordan Shannon

    Hi,

    Apologies, but unfortunately the only other way to achieve the effect would be to use separate columns and modify the css such as the section below.
    Best regards,
    Jordan Shannon

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