Hello,
I am having an issue with an icon overlay in a header. The four dots should be offset to the right as seen here https://dev9.curlyhost.com/ . On the mobile version, in Safari only, they are centered directly under the circle. Is there a way to target only the safari browser with CSS to push it over? I have tried this so far, but it is not working.
@media only screen and (max-width: 767px){
_::-webkit-full-page-media, _:future, :root .safari_only .headericon {
left: 30% !important;
}
}
Let me know if you need more clarification! Thanks!
Hey Andrea,
I’m not sure exactly what you need to adjust on Safari, could you post a screenshot highlighting the changes you would like to make please? If you want to target Safari only then you can use this class before your CSS:
.avia-safari
Best regards,
Rikard
This worked. Thanks!
@media only screen and (max-width: 767px){
.avia-safari .headericon {
left: 30% !important;
}
}
Hi CurlyHost,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria