CSS for line style works only directly in browser

Home Forums Jevelin Theme CSS for line style works only directly in browser

Home Forums Jevelin Theme CSS for line style works only directly in browser

This topic contains 6 replies, has 2 voices, and was last updated by  Shufflehound Support 1 month, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    RESOLVED Posts
  • I am referring to this page https://cbdfactum.com/product/cbd-factum-patches/ and to the lines as in the attached screenshot.

     

    When I apply this CSS directly in the browser inspector

     

    .woocommerce .woocommerce-tabs li, table, table td, table th {
    border-style: dotted !important;
    }
    

     

    then the style of the line changes  to dotted – as you can see in the 2nd screenshot.

     

    Adding it to my style.css does NOT work. I purge the cached, reloaded the page with CTRL+F51 – no change. Usually any change in this CSS file is immediately visible.

     

    What am I doing wrong?

    Attachments:
    You must be logged in to view attached files.

    Solution for this topic

    Hi @CBDFactum,

     

    I hope you are well today and thank you for your question.

     

    It seems the CSS specificity issue so please try using the below CSS code.

     

    .woocommerce #page-container .woocommerce-tabs li {
    border-style: dotted !important;
    }

     

    Best regards,
    Shufflehound team

    Thank you very much, it works! I appreciate your fast support.

     

    You can close this case.

    You are most welcome here 🙂

    Hi, is there any way to restrict the length of the dotted underline to the length of the text which is underlined? Thx

    OK, I could achieve it with this CSS:

    /* underline each li element with length of to the underlined text */
    .woocommerce #page-container .woocommerce-tabs ul > li  {
        text-decoration: underline #A9BF16 dotted;
    }
    
    /* hide the original underline in the product description below each li */
    .woocommerce #page-container .woocommerce-tabs li {
       border-style: none !important;
    }

    Is there a way to set the padding of the dotted line?

    • This reply was modified 1 month, 2 weeks ago by  CBDFactum.
    • This reply was modified 1 month, 2 weeks ago by  CBDFactum.

    No, we can’t add padding there.

Viewing 7 posts - 1 through 7 (of 7 total)