Archived

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

  • 0

Custom Css Questions


Question

Posted · Report post

I am trying to change the margin from 1.6em to 1.1em of a particular css class.  I have done a lot of custom css to the site (as you can see :)), but for some reason nothing is working for this change.

 

i have tried everything, by adding the following snippets to the custom css tab in pagelines (to name a few):

 

.page-id-174 #highlight section.copy {

margin: 1.1em;

}

 

 

.page-id-174 #highlight .copy {

margin: 1.1em;

}

 

.page-id-174 #section .copy {

margin: 1.1em;

}

 

 

.page-id-174 .copy {

margin: 1.1em;

}

 

I have attached a screen shot of the page and the Google developer tools css output.

 

Any advice would be great.  

 

Thanks!

 

Steve

post-40718-0-65313000-1356209777_thumb.j

post-40718-0-22852600-1356209782_thumb.j

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

Try this!

 

#site .section-highlight {
margin: 1.1em 0;
}

Share this post


Link to post
Share on other sites

Posted · Report post

worked! thank you, i would never have guessed!

Share this post


Link to post
Share on other sites

Posted · Report post

have you tried removing the  class before the section ID?

 

I haven't found that I've needed to use a prefacing class like that in any of my overrides?

Share this post


Link to post
Share on other sites

Posted · Report post

I am putting this code in the custom css tab in pagelines.. so i have to call upon the section and the css to make the change that over rides the css ... you can see the css that i am trying to change in the css_help.jpg

Share this post


Link to post
Share on other sites

Posted · Report post

Other factors are in play here which may not be adjusted given the code provided. For example, you also have:

#highlight .copy-pad .highlight-area {
    padding-top: 8px;
}

You should use Firebug's options to identify the CSS elements to test.  It's not hard to do.

Share this post


Link to post
Share on other sites

Posted · Report post

I put that padding CSS in myself.. that is not a problem.. i am able to change the padding, but i am not able to change the margin.. i did look at it in firebug and it is the same issue as it is in chrome

 

section.copy {

margin: 1.5 em;

}

 

i have done a ton of css changes to the site.. but for some reason there is no way to change the css this css

 

thanks for the help...

Share this post


Link to post
Share on other sites

Posted · Report post

Try using

#highlight section-copy {margin:1.1em 0;}

That code is compiled, thus shortened from the full.  It's presuming that since it follows #highlight, it's associated with it. So, customizing, you need to add the prefix to it.

Share this post


Link to post
Share on other sites

Posted · Report post

Rob,

 

Thanks a lot for the advice, but unfortunately it did not work.  It is super odd.  It is the only piece of CSS that I have had trouble editing.

 

Steve

Share this post


Link to post
Share on other sites