Viewing 30 posts - 1 through 30 (of 33 total)
  • Author
    Posts
  • #214375

    Hi Guys,

    Trying to reduce the space between columns created using Layout elements and images.

    See attached file (need to reduce the white space)
    http://imgur.com/O2PHKZC

    Thanks so much

    #214428

    Hi tusing!

    Can you post the link to your website and point out the page where you would like to make changes? I checked the website on your profile but could not find that section

    Best regards,
    Yigit

    #214436
    This reply has been marked as private.
    #214707

    Hi!

    You might need to adjust the width of the flex columns. Add this on Quick CSS:

    div .av_one_fourth {
    margin-left: 2%;
    width: 24.5%;
    }

    Best regards,
    Ismael

    #214721

    Hi Thanks for this. It worked for four columns, but does not work when with other combinations e.g one half, two third etc
    Regardless of the column combinations, I would like the space to be smaller. Thanks a lot for your help.

    #215483

    Hi!

    Please add following code to Quick CSS as well

    div .av_one_half {
    margin-left: 2%;
    width: 49%;
    }
    body div .first {
    margin-left: 0!important; }

    Cheers!
    Yigit

    #224048
    This reply has been marked as private.
    #225040

    Hey!

    Please add following code to Quick CSS as well

    .page-id-396 div .av_one_third {
    margin-left: 2%;
    width: 32%;
    }
    .page-id-396 .first { margin-left: 0!important; }

    Cheers!
    Yigit

    #585913

    I’ve applied Ismael’s style and it works perfectly for regular 1/4 columns as per this:
    div .av_one_fourth {margin-left: 1%; width: 24%;}

    However, when I select to make “equal height columns”, the above style does not work. I’ve tried several different approaches, but no luck.

    What code might work instead?

    Thanks,

    #586953

    Hi!


    @laptophobo
    please share a link to the page where we can inspect the element in question.

    Best regards,
    Vinay Kashyap

    #586979

    Hi. Please see private content for the link.
    Below Featured Trips: The upper row is not using Equal Heights selection.The lower row is.

    • This reply was modified 8 years, 9 months ago by laptophobo.
    #587726

    Hey!

    Please use the below CSS in quick CSS to reduce the space between equal height columns

    #top .av-flex-placeholder {
        width: 1%!important;
    }
    

    Regards,
    Vinay Kashyap

    #590342

    That worked perfectly, Vinnie. Thanks.

    #591350

    Hi,

    Glad we could help :-)

    Best regards,
    Rikard

    #750209

    Thanx a lot,
    that helped me a lot as well.
    Could you help me get the rows to the same height?

    Thanx in advance

    Regards

    Robert

    #752162

    Hi,

    I checked the link you provided. The site looks very nice but It’s not clear what rows are you referring to. If you still have any issue please open a new ticket (so we can keep the focus on the main topic) and upload a screenshot/mockup to imgur.com and share the link here so we can help you better :)

    Best regards,
    Vinay

    #773285

    Hi,

    I have a similar issue. I’m using a 1/4 1/4 1/2 column layout for my frontpage. In my child theme I used:

    div .av_one_fourth {margin-left: 2%;width: 24.5%;}
    div .av_one_half {margin-left: 2%;width: 49%;}

    As you can see in the preview link (PC), it’s not working properly. What am I doing wrong?

    Best regards,

    Steven

    #774295

    Hi Steven,

    I’m not sure what you are trying to accomplish, could you try to explain a bit further or post a screenshot highlighting your intentions please? Also, next time please open a new thread.

    Best regards,
    Rikard

    #774512

    Hi Rikard,

    In order to avoid clutter I thought I’d reply to this topic instead of opening a new thread, my bad. What I want to accomplish is a 1/4 1/4 1/2 column layout with less space between the colums than the default space.

    Please see screenshot here: http://imgur.com/NQ9oFB1

    Cheers,

    Steven

    #774590

    Hi steviger,

    If you still need help with this issue, can you please give us temporary admin access to your website in the private content box below, so that we can have a closer look.

    Best regards,
    Victoria

    #775907

    Hi,

    No problem! Please see PC for login credentials. You want to look in pages >Home. Right beneath the layer slider you’ll find the color section (.contentsectionpadding { padding-left:50px; padding-right:50px;} ) with the
    1/4 ( div .av_one_fourth {margin-left: 2%;width: 24.5%;} )
    1/4 (div .av_one_fourth {margin-left: 2%;width: 24.5%;})
    1/2 div .av_one_half {margin-left: 2%;width: 49%;})
    column layout.

    Please see my child CSS under Appearance> Editor

    Thanks in advance!

    Cheers,

    Steven

    #776056

    Hi Steven,

    You can do it like this:

    
    div .av_one_fourth {margin-left: 1%;width: 24.5%;}
    div .av_one_half {margin-left: 1%;width: 49%;}
    

    Put this css in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css or in child theme, if you use one.
    If you need further assistance please let us know.
    Best regards,
    Victoria

    #776123

    Hi Victoria,

    Yep, that did the trick. Thanks!

    #851597

    Hi

    Is there any solution that you can do to adjust the distance to all types of columns?

    #851875

    Hi Vikab,

    Could you try to explain a bit further what you are looking to achieve please? A screenshot might help us understand better as well.

    Best regards,
    Rikard

    #851907

    Yes.

    Sometimes I want less spacing between the columns on the entire website in all types of column variants. All resolutions.
    Here is an example:

    View post on imgur.com

    #852378

    Hi,

    Thanks for that. These are the default CSS values, see if you can play around with them to get the margins you want:

    .av_one_half {
        margin-left: 6%;
        width: 47%;
    }

    Best regards,
    Rikard

    #852409

    Thank you, thist helps in only one variation!

    There should be a setting for it in ENFOLD, otherwise i have to write wery much CSS.

    There are over 10 different types of classes and columns!

    Can you solve the problem?

    #852822

    Hi,

    Ok, thanks for the feedback, though there isn’t a setting for that in the theme unfortunately. You can inspect the element in the browser to see exactly what CSS it’s using, could you try that out maybe?

    Best regards,
    Rikard

    #864816

    Hi, Vicab,

    is this what you need?

    /*Gap between columns*/
    #top .av-flex-placeholder {
    display: table-cell;
    width: 1%;
    }

    Adjust width.

    Cheers

Viewing 30 posts - 1 through 30 (of 33 total)
  • The topic ‘resizing space between columns’ is closed to new replies.