Tagged: 

Viewing 30 posts - 1 through 30 (of 33 total)
1 2
  • Author
    Posts
  • January 24, 2014 at 1:10 pm #214375
    tusing

    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

    January 24, 2014 at 3:07 pm #214428
    Yigit

    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

    January 24, 2014 at 3:13 pm #214436
    tusing
    This reply has been marked as private.
    January 25, 2014 at 4:16 am #214707
    Ismael

    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

    January 25, 2014 at 5:19 am #214721
    tusing

    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.

    January 27, 2014 at 8:26 pm #215483
    Yigit

    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

    February 14, 2014 at 4:38 pm #224048
    tusing
    This reply has been marked as private.
    February 17, 2014 at 7:18 pm #225040
    Yigit

    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

    February 19, 2016 at 8:57 am #585913
    laptophobo

    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,

    February 22, 2016 at 8:41 am #586953
    Vinay

    Hi!


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

    Best regards,
    Vinay Kashyap

    February 22, 2016 at 9:20 am #586979
    laptophobo

    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.
    February 23, 2016 at 2:36 pm #587726
    Vinay

    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

    February 28, 2016 at 5:04 am #590342
    laptophobo

    That worked perfectly, Vinnie. Thanks.

    March 1, 2016 at 6:27 am #591350
    Rikard

    Hi,

    Glad we could help :-)

    Best regards,
    Rikard

    February 22, 2017 at 12:25 am #750209
    robertdizdarevic

    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

    February 27, 2017 at 6:48 am #752162
    Vinay

    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

    April 6, 2017 at 3:58 pm #773285
    steviger

    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

    April 8, 2017 at 6:32 am #774295
    Rikard

    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

    April 8, 2017 at 2:41 pm #774512
    steviger

    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

    April 8, 2017 at 5:12 pm #774590
    Victoria

    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

    April 11, 2017 at 10:14 am #775907
    steviger

    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

    April 11, 2017 at 2:39 pm #776056
    Victoria

    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

    April 11, 2017 at 3:39 pm #776123
    steviger

    Hi Victoria,

    Yep, that did the trick. Thanks!

    September 13, 2017 at 2:48 pm #851597
    Vikab

    Hi

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

    September 14, 2017 at 7:26 am #851875
    Rikard

    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

    September 14, 2017 at 8:43 am #851907
    Vikab

    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

    September 15, 2017 at 4:22 am #852378
    Rikard

    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

    September 15, 2017 at 8:15 am #852409
    Vikab

    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?

    September 16, 2017 at 7:01 am #852822
    Rikard

    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

    October 16, 2017 at 2:17 pm #864816
    OrangeMoose

    Hi, Vicab,

    is this what you need?

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

    Adjust width.

    Cheers

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