[Resolved] Adding CSS is very problematic

[kane]

Hi,

adding additonal CSS is very tricky.

I’m usig a child theme. Sometimes it works to add CSS in the Style.css of child theme. But sometimes it doesnt work.

Why?

I dont want to use additional Plugin (add custom css), because i hate 3 Party Plugins. 🙂

I would like to add directly in Style. css

Thanks

[Tom]

Hi there,

Adding CSS shouldn’t be tricky at all – if the CSS you’re adding to your child theme is valid, it should work 100%.

The child theme style.css file is even loaded after the parent stylesheet and the CSS generated by the Customizer, so it should take priority over those other styles.

One thing that can make your child theme CSS problematic is importing the parent stylesheet into it.

More on that here: http://generatepress.com/knowledgebase/child-theme-working/

[bdbrown]

Hi kane. Couple of additional thoughts:
1. The child theme css is being applied but it is being overridden by the parent css which has a higher specificity.
2. The selectors used in the css don’t match the actual element you’re trying to target.

If possible please post a link to your site and give an example of a child theme style that’s not working.

[kane]

Hi,

i’m 100 % Sure, it doesnt work.

This html:

<div class="wrapperprodukt1">
	 <div class="onebild">
       <center><a href="{$AmazonUrl}" target="_blank" rel="nofollow"><img src="{$MediumImageUrl}" width="{$MediumImageWidth}" height="{$MediumImageHeight}" border="0" style="border: 0;" title="{$Title}"/></a></center>
    </div>
    <div class="twotext">
        <p style="padding-top: 15px; margin-bottom: 6px;"><a href="{$AmazonUrl}" target="_blank" rel="nofollow" title="{$Title}">{$Title}</a></p>    
        <p style="padding-bottom: 0px; margin-bottom: 3px;"><img src="http://domain.com/{$AverageRating}.png" title="{$AverageRating} von 5 Sternen"> ({$TotalReviews} Kundenrezensionen)</p>
		<p style="padding-bottom: 0px; margin-bottom: 0;"><strong>Erhältlich ab:</strong> <span style="color: #238d1a; font-weight: bold;">{$AmazonPriceFormatted}</span></p>
        </div>
    <div style="clear: both;"></div>
</div>

And this Css:

.wrapperprodukt1{ 
  border: 1px solid #e8e8e8; 
  margin-bottom: 18px;
  overflow:hidden;}
.onebild {
  float:left; 
  margin-right:20px;
  margin-top: 12px;
  width:200px;}
.twotext { 
  background-color: white;
  overflow:hidden;
  margin:10px;
  min-height:120px;
  padding-top: 11px;}
@media screen and (max-width: 550px) {
   .onebild { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;   
  }
}

doesnt workt with child theme.

When adding in simple custom css plugin it works.

What is the problem with the theme`?

Thx

[Tom]

Can you try adding that CSS above everything else in the child theme? If there’s an error anywhere in your child theme CSS above the mentioned CSS, it stops reading everything below the error.

Adding the above to the top of the file will tell us if the other CSS is valid or not.

[kane]

Hi Tom,

thank you. this solution works.

🙂

[Tom]

Cool – you can use a service like this to find the error in your CSS: https://jigsaw.w3.org/css-validator/

[Author]

Posts