Padding issues

Comments

• panagiotiskara

  May 2015 edited 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• panagiotiskara

  May 2015 edited 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; }

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• 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.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next