1

The CSS that I wrote for the header is not working well on safari but it is working on the other web browsers.

The problem that I am having is that on chrome, etc. the margin-top from my logo is on -30px but on Safari it needs to be -15px

I have already tried a few things but it is not taking me anywhere. This is a example of what I have tried:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .header-center-items {
    margin-top: -30px;
    }

    /* Safari only override */
    ::i-block-chrome,.header-center-items {
     margin-top: -15px !important;
    }
}
blurfus
  • 13,485
  • 8
  • 55
  • 61
Akram Tarioui
  • 11
  • 2

1 Answers1

0

This is not an exact solution, but more of a work around. You could the following:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
    .header-center-items {
      margin-top: -30px;
    }

    /* Safari only override */
    ::i-block-chrome,.header-center-items {
      position: relative;
      top: 15px;
    }
}

Let me know if it works.

ralphwayTOW
  • 108
  • 1
  • 8
  • thank you for you're time, but it seems like safari is not reading the "override", because when i am inspecting i don't see it anywhere – Akram Tarioui Oct 27 '20 at 23:59
  • @AkramTarioui Hmm, seems like you can't use that selector any more then. Then you just have to use some simple javascript to fix this. Please see this [post](https://stackoverflow.com/questions/29120893/how-to-set-media-query-for-safari-web-browser) – ralphwayTOW Oct 28 '20 at 00:12
  • i really don't know where to put the javascript it is a wordpress site and i am just changing the CSS, do you know where i can add the script? i am new in the developer world, thank you for you're response. – Akram Tarioui Oct 28 '20 at 01:07