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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    RESOLVED Posts

  • CBDFactum
    Participant

    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.

    Shufflehound Support
    Moderator

    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

    CBDFactum
    Participant

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

     

    You can close this case.

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

    CBDFactum
    Participant

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

    CBDFactum
    Participant

    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 4 years, 3 months ago by CBDFactum.
    • This reply was modified 4 years, 3 months ago by CBDFactum.

    Shufflehound Support
    Moderator

    No, we can’t add padding there.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)