Safari Issues with custom CSS

[wtflovelife]

Hi! It looks like none of my custom CSS is taking in Safari. Is there anything that I can do about this? Attached screenshots of Chrome (and how it should work) and Safari (which looks crazy!).
THANK YOU

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Add your custom css to this validator to see if there are any errors – https://jigsaw.w3.org/css-validator/#validate_by_input

That will likely be the issue.

– Ed

[wtflovelife]

Hi Ed! Thanks for this. It has only give me one error though…It seems to all be related to this:

-webkit-font-smoothing: antialiased;

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

ARe you referring to the custom CSS you have added to your theme options?

If so, I can see a couple of errors that you need to amend:

Wrong:

@media only screen and (max-width: 1024px)
.products[data-columns="3"] .product .cart-overlay .shop-actions {
    display:none!important;
}

Correct:

@media only screen and (max-width: 1024px) {
  .products[data-columns="3"] .product .cart-overlay .shop-actions {
     display:none!important;
  }
}

Wrong:

figure.animated-overlay figcaption {
    background-color:rgba(0, 0, 0, 0.4)
}

Correct:

figure.animated-overlay figcaption {
    background-color: rgba(0, 0, 0, 0.4);
}

If you update those, let us know if you still encounter any issues.

– David.

[wtflovelife]

OMG! Those two things fixed EVERYTHING! Thank you SO much! I’ve been pulling my hair out! I wonder why those two things didn’t register in the validator!?

[David Martin – Support]

🙂 🙂 Great news, no problem!

– David.