Padding issues

panagiotiskara · May 2015

Hello and congratulations for the awesome theme. Please check out this link: http://www.jol-travel.com/packages/activities/hiking/

I have made those 3 columns using visual composer. Each column has 4 different elements: image - title - description - button. However the padding between the elements, especially this one between image and title, is too big although all the elements are in the same column. Is it the default padding? Cause it is too big I think. I have already found the css box styling under "design options" and I put "0" to all bottom and top padding but it doesn't work. The only way to remove this big space between the title and the image was putting margin -30px to title's css box settings but I guess this is not the best solution and also I have to do the same for each element.

So, what's the best way to fix the padding between the elements? Thank you in advance!

panagiotiskara · May 2015

I would also like to add that i have made a custom css class putting padding: 5px; but it doesn't overwrite the default padding, it just puts an extra 5px to the already padding which as I mentioned above is too big already.

Also, I tried to put a background color to the middle column just to stylize my page and there are padding issues here as well which I cannot explain. As you can see, the content in the middle column with the grey background has paddings left and right but there is no padding above the image (inside the column i mean) and also there is no padding below the button so the button goes off the grey background.

Albert · May 2015

Hi,

padding is too big because this is how VC plugin works and such paddings can be changed within below css only:

.wpb_wrapper > div { margin-bottom: 15px !important; }

And because it is Visual Composer, most things must be changed with css as above. We recommend to have a look at http://themes.muffingroup.com/betheme/documentation/#theme-customizations where we explained how to use custom css.

panagiotiskara · May 2015

So i have to check out which class I'm interested of to change and i put a custom code with the !important right? I think I got it. Thank you! If you check now the margins inside the columns at http://www.jol-travel.com/packages/activities/hiking/ looks good.

I tried to put colour-background in the columns however, this way, there is no space between the columns. If I try to put right-margin on each column then the last column will go below. This must be because the total width of the columns along with the margins is not enough to keep them in the same line. How can I customize the width of the columns ? I just used the default 1/3 column but I don't know how to customize its width so to calculate both the size of the margins and the column.

Also, if you see the image has the same margins as the text and the button. I was trying to seperate it's values from the text but I didn't made it. I want the image to be full width inside it's column with no left/right/top paddigs. Like a header of it's own column. How can i fix it? I tried both the following css:

.wpb_wrapper > img { padding: 0px !important; }
.wpb_wrapper > img { margin: 0px !important; }

but both doesn't work.

Albert · May 2015

Unfortunately you can't change VC columns width. Those elements can not be touched. But to remove all those paddings/margins, you can use below cs but this may destroy other sections as well because that's how this plugin works.

.wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .last_toggle_el_margin, .wpb_button { margin-bottom: 0 !important; }
.the_content_wrapper { margin: 0 !important; }
.section_wrapper, .container { width: 1210px !important; }
body:not(.template-slider) #Content { padding-top: 0 !important; }

panagiotiskara · May 2015

Can't I use this code just for a unique section without affecting other sections? I thought it was possible to have different css styles for each section using VC.

Albert · May 2015

In this case it's not possible because those are general settings. You can only setup them per page.

Padding issues

Comments