0

I added an offset to my HTML anchors (my theme has fixed header) via the following CSS:

    margin-top: -175px;
    padding-top: 175px;
}

/* 760px and smaller screen sizes */
@media (max-width:760px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -160px;
        padding-top: 160px;
    }
    
}

/* 401px and smaller screen sizes */
@media (max-width:401px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -190px;
        padding-top: 190px;
    }
    
}

/* 317px and smaller screen sizes */
@media (max-width:317px){

    #randomClass1, #randomClass2, #randomClass3{
        margin-top: -220px;
        padding-top: 220px;
    }
}

It works great on every resolution in every browser except for mobile Safari. In Apple's browser on resolutions below 780px (I checked on iPhone 12 in horizontal mode) margin-top is too low. How can I fix it, knowing that the issue is present only in Safari? Is there any way to alter CSS only for this browser?

Or maybe there is a better way to add offset to html anchors that would make it all look the same on every browser?

kacperrro99
  • 25
  • 7
  • Probably depending on the safari bottom bar. I suggest you to sniff the browser using javascript and add a specific class on the body. https://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser – Germano Plebani Aug 23 '21 at 10:29

1 Answers1

0

Is there any way to alter CSS only for this browser?

Yes, there might be some working css selectors for Safari here: is there a css hack for safari only NOT chrome? (You can filter for a given device by the screen size)

Or maybe there is a better way to add offset to html anchors that would make it all look the same on every browser?

Not really adding, but by resetting the css at the beginning of the css file. Here's an example of a css reset: https://meyerweb.com/eric/tools/css/reset/

adyk5
  • 26
  • 3