Tagged: columns
-
AuthorPosts
-
November 3, 2015 at 9:02 pm #529619
Hi, I see a lot of people asking how they can adjust the spacing between columns in Avia Layout Builder, but all the replies are all marked as private.
I created 2 columns 1/2 and 1/2, but the space between the columns is too big, about 50 or 60px I think. Can someone tell me how I can reduce this to 20px please?
Thanks.
November 4, 2015 at 10:08 am #529828Hi trader121,
You can set individual padding to each column in the Layout tab, if this is not what you are looking for then please post a link to your site and try to explain a bit further what you are trying to do.
Regards,
RikardNovember 4, 2015 at 7:17 pm #530366Hi Rickard, thanks for the reply, and the great theme.
No, that’s for the padding within a column. I’m taking about the space between 2 columns.
In the Edit Column, row settings, you can only have “space between columns”, or “no space between columns”. I want to reduce the space between columns but I cant do that because it puts the space in automatically, how do I reduce the space please? Is there a css file or something where I can change it?
November 5, 2015 at 8:45 am #530578Hi,
Yes it can be done with CSS, please link to the site in question and indicate what changes you would like to make.
Best regards,
RikardNovember 5, 2015 at 8:26 pm #531167The website and page is here: http://www.adams-accountancy.co.uk/bookkeeping/
In the main content, I would like to reduce the size of the gap between the column with title “Bookkeeping”, and the column with title
November 7, 2015 at 7:24 am #531746Hi,
Seems like we have to be logged in to view the page, could you post login details please? You can post them in the Private Content section of your reply.
Best regards,
RikardJanuary 4, 2016 at 6:10 pm #559374I think I have a similar issue, I would like to close up the spacing on http://otb-creative.co.uk/ by closing the gap between the 3 buttons “Find out more” “See our work” “Contact us”.
Can this be done?
January 5, 2016 at 8:38 am #559763Hi,
Please try the following in Quick CSS under Enfold–>General Styling:
.home #av_section_1 .av_one_fifth { margin-left: 2%; } .home #av_section_1 .first { margin-left: 6% !important; }
Thanks,
RikardJanuary 5, 2016 at 11:06 am #559831Thanks, I have done that and solved that issue but now the main title and text has gone off centre, can this be fixed?
http://we.tl/5pApV20JL6- This reply was modified 8 years, 11 months ago by sphilton.
January 6, 2016 at 1:20 pm #560480Has anyone got any ideas on the post above please?
January 7, 2016 at 3:16 am #560925Hey!
I’m sorry but I can’t find the section from the screenshot. Did you replace it with the “lightbulb” thing?
Cheers!
IsmaelSeptember 26, 2018 at 8:10 am #1014573I have the same issue with column spacing. The problem in general using the layout padding is that when the screen gets narrow (e.g. portrait mode on mobile) and one row of 3 columns goes to 3 rows of 1 column, each row is not centered. Can someone please take a look at the set up we have for our page. One section has one row of 3 1/4 width columns (1/5 was too narrow) and another section with two 1/3 width columns (directly below). We just want to decrease the space between the columns for each section. Thanks!
September 26, 2018 at 7:36 pm #1014951Hi Eric,
How can I login? /wp-admin is going to a 404.
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaSeptember 26, 2018 at 8:12 pm #1014976Apologies. See below…
September 27, 2018 at 8:11 am #1015150Hi,
I have tried to take a look at your page, but I’m not sure if I’m looking at the correct sections because the columns look centered to me.
Please see the screenshots in Private Content area.
Please advise.Best regards,
MikeSeptember 27, 2018 at 9:00 am #1015185Hi Mike,
We’re able to have the columns centered. The issue is the spacing between the columns. Wed like to decrease the spacing between the columns. If you expand the window the columns separate creating a lot of space in between. If we add padding to the left of the far left column and padding to the right of the far right column it helps on desktops but when the screen goes portrait on mobile the padding pushes the columns off center. The left column (top row on mobile portrait) will be off center to the right. And the right most column will be pushed to far to the left of a mobile screen.Is there a way to simply decrease the spacing between the columns on wide screens yet keep them centered on mobile screens when they stack into one column?
Thanks!September 27, 2018 at 6:28 pm #1015432Hi Eric,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 1500px) { #top #custom-column-padding .flex_column_table { width: 60%; margin: 0 auto; } }
If you need further assistance please let us know.
Best regards,
VictoriaSeptember 27, 2018 at 6:31 pm #1015433Sweet! Thanks Victoria. We’ll give it a shot. Looks like you’re using our custom class for column spacing. Thanks for including that!
September 27, 2018 at 7:01 pm #1015457Works like a charm. Thank you! Just needed to massage the values a bit and add “!important”. Looks great.
Be great if the theme was updated to where you could designate column spacing and width of areas at the page level and section levels with some “page” and or “section options”. I know you can for the entire site but for responsive sites that are full width (mostly because of edge to edge backgrounds, it’s a great feature to keep the content from getting too spaced out on bigger screens. Thanks again. You guys rock!
September 27, 2018 at 8:01 pm #1015491Hi Eric,
Well, it is like that at this point. At least, we’re here to help you with the css :)
If you need further assistance please let us know.
Best regards,
VictoriaOctober 1, 2019 at 4:53 pm #1143838Hi All,
I’d also like to reduce spaces between columns but on specific pages. Also switched Custom CSS Class on. Can I and how can I do this on individual pages?
Thanks in advanceOctober 2, 2019 at 6:51 am #1144073October 2, 2019 at 4:40 pm #1144201Hi Mike,
thank you for your help. I try this way and see how it works.
Have a great day:)
October 22, 2019 at 12:57 pm #1150169Hi I have gone through numerous posts relating to reducing the spacing between columns.
However (whether down to my ignorance or something else) whatever I have tried has not seemed to work for me.
I have this site: https://skyro.cc/ruairi/ that I need to reduce the spacing between the columns on 2 rows.
Each column has an image and I want to make the aesthetics of the space between the 2 rows of images uniform and much smaller between the columns.
I have tried a variety of adjusting the “Edit Column >> Layout” and nothing I put in there seems to make a difference (using the Chrome browser on a mac).It would be great if there was a general rule / process for reducing the spacing between columns, so that I can apply it when and where needed. I see mainly the solutions relate to CSS edits.
Can anyone help me understand how to reduce the columns spacing in this specific circumstance and help me understand how to apply this reduction of column spacing in general for future needs?
Thanks for your support.
- This reply was modified 5 years, 2 months ago by wagwag.
October 23, 2019 at 12:22 pm #1150481Hi,
@wagwag thanks for the link to your site, while we can offer you some css that will solve this for you, I understand that you would like to be able to adjust this yourself, in which case the instructions above should work. Please include an admin login in the Private Content area so we can take a look at your settings. Since this is not your thread posting your login here will not be private and you will not see anything we write in the Private Content area, so I recommend starting a new thread with admin login info, you can post a link to it here so it will be easier for us to find.Best regards,
MikeFebruary 16, 2020 at 10:42 pm #1185021Hello
I too have tried these and they do not work for me. Perhaps you can help. I have listed the credentials below. On the home page, there are two column sections. Page down past ‘core features’ then a blue section and then color sections with two column rows are shown. The sections have CSS applied to centre the two columns in each, which are 1/3 and 1/2. I would like to increase the space between the columns (not padding as that is within the column), but ensure that cols are still centred on mobile and tablet when the two col rows show as one col rows.
Thanks very much.February 17, 2020 at 2:45 pm #1185224Hi,
I took a look at your section, but your container is set to a max-width of 1280px, so adding more space between the columns makes the image smaller. You could go to your layout settings and make the max-width larger which should make the space between larger because it is a percentage of the page width.
How much space do you want?Best regards,
MikeMay 19, 2020 at 4:18 am #1214170I jumped into this forum since still open.
A fast question:
What to add a Quick CSS to control the space between column, indipendentely of their number?
something like:/*---------------------------------------- // Column margin //-------------------------------------- div .flex_column { margin-left: 20px!important; right-left: 20px!important; }*/
??
thanksMay 19, 2020 at 12:32 pm #1214312Hi,
I’m not sure what you mean by “indipendentely of their number”
Perhaps if you linked to a test page that we can see what you want to do.Best regards,
MikeMay 19, 2020 at 5:27 pm #1214378What I meant is that no matter how many columns I have in the content, I would like a quick CSS to control their position. Basically, I want to reduce the white between the images. I attach my website link. But I don’t want a quick CSS for one page, but something I can use for all website.
-
AuthorPosts
- The topic ‘Column Spacing’ is closed to new replies.