skip to Main Content

https://www.development-vip.co.uk/product/smirnoff-espresso-vodka-70cl/
(password: hide)

You will notice in the page source that my stylesheet (main-style) which I am loading at the highest priority is almost at the top in the head. Way above my themes style.

Why is my theme styling above it in the editor? Because its overriding the styles.

enter image description here

2

Answers


  1. The last loading css files will override previous stylings when they have same specificity (like simple class selectors in your example). You should put general (default) styles first and overrides below.

    If there’s a conflict with specificity you can make css rules more specific by prepending a selector. Below rule will go over the class selectors:

    #main .col {
        /* styling here */
    }
    
    Login or Signup to reply.
  2. Usually the stylesheets are referenced/loaded in the header, which in this case (WordPress) probably is part of the theme’s header.php file. You can look in there to see if those two stylesheets are loaded in the wrong order and change it. However, you should probably create a child theme if you do this to avoid the edited header.php file to be overwritten when the theme is updated next time.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search