hi, me again, i have a pretty general question about best practice of handling margins and borders. the issue that i'm having is the following:
i redid the design of the framlabs.com/u section. one of the things i wanted was a lot more space around the content. so i decided to have all the elements be 10 columns wide instead of 12. is there a better way of doing this? i guess its part of the responsive side of things?
the reason why i'm asking is that there will be sections like the quotes section on the subpages. that means a heading above and content below, in three columns. the way i did it now is that i have a div called #quotes with two (10-column) rows on top of each other. the upper has the heading, and the lower has another row in it, with the three columns with contents. the problem is of course that this creates more margin/padding, and the content and heading don't sit so nicely together, not neatly left aligned to the same position. haven't found a easy way to get rid of the paddings with css. i would need to have the left padding of the first column to be 0, aswell as the right padding of the last column, but some padding between the columns.
one solution is to drop another row inside the row for the header. but this means that i would have to drop a lot of other elements in double rows, to make everything on the pages align nicely, and it which feels kind of stupid.
Hi, Arlind. Thanks. Could you please try to give me advice on this. I'm very aware of that VC adds margins and padding, i'm looking for the best solution to go about this. I have a design where i need to tackle this issue in a lot of places and hate to add extra css for every section. like i wrote
- the best way would be to add a lot more space around the whole content (wrapper?), is there a way to do that?
hi, me again, i have a pretty general question about best practice of handling margins and borders. the issue that i'm having is the following:
i redid the design of the framlabs.com/u section. one of the things i wanted was a lot more space around the content. so i decided to have all the elements be 10 columns wide instead of 12. is there a better way of doing this? i guess its part of the responsive side of things?
the reason why i'm asking is that there will be sections like the quotes section on the subpages. that means a heading above and content below, in three columns. the way i did it now is that i have a div called #quotes with two (10-column) rows on top of each other. the upper has the heading, and the lower has another row in it, with the three columns with contents. the problem is of course that this creates more margin/padding, and the content and heading don't sit so nicely together, not neatly left aligned to the same position. haven't found a easy way to get rid of the paddings with css. i would need to have the left padding of the first column to be 0, aswell as the right padding of the last column, but some padding between the columns.
one solution is to drop another row inside the row for the header. but this means that i would have to drop a lot of other elements in double rows, to make everything on the pages align nicely, and it which feels kind of stupid.
Hi Rikard,
In this situation you need to add Custom CSS to that page in order to properly align the rows and columns.
Each Visual Composer widget has its own margin and padding so in case they are showing incorrectly.
Usually, VC will align elements properly but if they are not in the same line, do this with Custom CSS for that page only.
Hi, Arlind. Thanks. Could you please try to give me advice on this. I'm very aware of that VC adds margins and padding, i'm looking for the best solution to go about this. I have a design where i need to tackle this issue in a lot of places and hate to add extra css for every section. like i wrote
- the best way would be to add a lot more space around the whole content (wrapper?), is there a way to do that?
Hi Rikard,
I suggest you to add the custom CSS specific only to that page using Visual Composer:
(view large version)
Because changing general styling (global CSS) for Visual Composer is not recommended because it will affect the whole site.