Archived

This topic is now archived and is closed to further replies.

  • 0

Change content pad on content box

Question

Posted · Report post

I have tried several different things to change the content pad on a content box and I am not that good at firebug especially when things are nested.

 

Here is what I tried:

 

.hentry-pad cb-standard-pad entry_content  { padding: 10px 10px 10px;}

 

Thank you in advance. I really appreciate those that are so willing to help.

Share this post


Link to post
Share on other sites

16 answers to this question

Posted · Report post

Hi,

 

All sections in PageLines Framework have a similar HTML/CSS structure to position the sections content, this structure looks like this:

 

<section ID="SectionName" class="section-sectionname fix"> <== There may be more classes but this is just for example purposes.

<div class="texture">

<div class="content">

<div class="content-pad">

 

Now as you can see above, each section has a div with a class called content-pad, this container controls the padding for that section. So in order to reduce this sections padding, we will need to use the sections class, which you can see in the <section> above and then add the content-pad class after it in our code, this will target that sections content-pad and no others.


This means you can reduce the padding for that section and that section alone. The code you have above, will do it globally across your site.

 

So here is an example which will assist you.

 

.section-sectionname .content-pad { padding:0px; }

 

The code above will give our example section zero padding and therefore reduce the space (gap) from top, right, bottom and left.

 

As for your Download button, you have added the HTML for your button in the ContentBox section. So I recommend using Firebug or your browsers built-in web dev tools and inspect the ContentBox sections content-pad element to find the correct code.

 

For assistance visit our custom CSS documentation - http://support.pagelines.me/docs/customization/custom-css/

3 people like this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

Many apologies but I'm unclear of several things:  Where are you trying to do this on the page? What's the link you're trying to modify? What's the primary goal?

 

Thanks.  I'll be happy to guide you.

Share this post


Link to post
Share on other sites

Posted · Report post

http://www.ehr1.co/

Scroll down to the second set of boxes. I would like to diminish the bottom padding of the content box a bit.

When I use firebug I get this but I don't know how to reference the contentbox. See it says 15 px bottom. But what is the code to reference the box?

 

.content-pad {
    padding-bottom2px !important;
    padding-left15px;
    padding-right15px;
    padding-top7px;
}
.content-pad {
    padding-bottom15px;
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

I believe the proper element you're trying to modify is .hentry .cb-standard which isn't seen in the sandbox, but is seen in the HTML code. When you find it there, and hover in Firebug, you'll see the bottom space is highlighted in yellow.

 

I believe you need to set margin-bottom : 0; or padding-bottom : 0; to that. 

 

Hope this helps.

Share this post


Link to post
Share on other sites

Posted · Report post

Rob,

You helped me tremendously. I did not know to access the html code to figure out how to reference an item properly. This is going to make such a difference for me. Thank you very much for your time and expertise.

Share this post


Link to post
Share on other sites

Posted · Report post

I have been trying to do what you said to take out the white gaps between layers of my website. I can't seem to get it to work. Can you help me with my homepage?

 

Thanks,

connor

Share this post


Link to post
Share on other sites

Posted · Report post

Hi @bellcreative, please open a new topic and reference this.

Share this post


Link to post
Share on other sites

Posted · Report post

I thought I understood but I have now spent hours trying to do this on my own and it continues to say

.content-pad {
    padding-bottom15px;
    padding-left15px;
    padding-right15px;
    padding-top15px;
}
 
Would you please consider giving me the proper code to remove all of that white space around the download now button on this page: http://www.ehr1.co/test-page?
Thank you in advance.

Share this post


Link to post
Share on other sites

Posted · Report post

What am I doing wrong. I really am trying to be self sufficient and not rely on others.

 

.hentry .cb-standard .content-pad}
padding-bottom: 2px !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 7px;
{

 

Thank you.

Share this post


Link to post
Share on other sites

Posted · Report post

As I mentioned above, you want to use the sections class and then add after that the content-pad class, then apply your padding to it.

 

Also, the ContentBox your download button is using is a clone, therefore, you will also need to add the clone class to your code.

I have provided you with the correct code below, all you need to do is add your padding to it.

 

 

.section-contentbox.clone_2 .content-pad { }
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Thank you. I really am trying to learn this. I greatly appreciate your patience with me.

Share this post


Link to post
Share on other sites

Posted · Report post

Danny,

I am sorry. This is not working for me and I do not understand.

 

.section-contentbox.clone_2 .content-pad {
padding:0px;}

Share this post


Link to post
Share on other sites

Posted · Report post

Cached! I am sure you are very sick of me. I will study your tutorial that you spent so much time reading. I am quite blessed to have you help me. Thank you.

Share this post


Link to post
Share on other sites

Posted · Report post

No problem, happy to help.

Share this post


Link to post
Share on other sites