Tagged: Layout elements
-
AuthorPosts
-
January 24, 2014 at 1:10 pm #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/O2PHKZCThanks so much
January 24, 2014 at 3:07 pm #214428Hi 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,
YigitJanuary 24, 2014 at 3:13 pm #214436This reply has been marked as private.January 25, 2014 at 4:16 am #214707Hi!
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,
IsmaelJanuary 25, 2014 at 5:19 am #214721Hi 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 #215483Hi!
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!
YigitFebruary 14, 2014 at 4:38 pm #224048This reply has been marked as private.February 17, 2014 at 7:18 pm #225040Hey!
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!
YigitFebruary 19, 2016 at 8:57 am #585913I’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 #586953Hi!
@laptophobo please share a link to the page where we can inspect the element in question.Best regards,
Vinay KashyapFebruary 22, 2016 at 9:20 am #586979Hi. 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, 10 months ago by laptophobo.
February 23, 2016 at 2:36 pm #587726Hey!
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 KashyapFebruary 28, 2016 at 5:04 am #590342That worked perfectly, Vinnie. Thanks.
March 1, 2016 at 6:27 am #591350February 22, 2017 at 12:25 am #750209Thanx 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 #752162Hi,
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,
VinayApril 6, 2017 at 3:58 pm #773285Hi,
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 #774295Hi 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,
RikardApril 8, 2017 at 2:41 pm #774512Hi 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 #774590Hi 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,
VictoriaApril 11, 2017 at 10:14 am #775907Hi,
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 #776056Hi 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,
VictoriaApril 11, 2017 at 3:39 pm #776123Hi Victoria,
Yep, that did the trick. Thanks!
September 13, 2017 at 2:48 pm #851597Hi
Is there any solution that you can do to adjust the distance to all types of columns?
September 14, 2017 at 7:26 am #851875Hi 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,
RikardSeptember 14, 2017 at 8:43 am #851907Yes.
Sometimes I want less spacing between the columns on the entire website in all types of column variants. All resolutions.
Here is an example:September 15, 2017 at 4:22 am #852378Hi,
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,
RikardSeptember 15, 2017 at 8:15 am #852409Thank 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 #852822Hi,
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,
RikardOctober 16, 2017 at 2:17 pm #864816Hi, Vicab,
is this what you need?
/*Gap between columns*/
#top .av-flex-placeholder {
display: table-cell;
width: 1%;
}Adjust width.
Cheers
-
AuthorPosts
- The topic ‘resizing space between columns’ is closed to new replies.