[Resolved] Adding CSS is very problematic

Home Forums Support Adding CSS is very problematic

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #123278
    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

    #123315
    Tom
    Lead Developer
    Lead Developer

    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/

    #123318
    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.

    #123721
    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

    #123740
    Tom
    Lead Developer
    Lead Developer

    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.

    #123837
    kane

    Hi Tom,

    thank you. this solution works.

    🙂

    #123914
    Tom
    Lead Developer
    Lead Developer

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.