I made adjustments to my HTML anchors by adding an offset in the CSS to accommodate for a fixed header in my theme:
margin-top: -175px;
padding-top: 175px;
}
/* Adjustments for screen sizes of 760px and smaller */
@media (max-width:760px){
#randomClass1, #randomClass2, #randomClass3{
margin-top: -160px;
padding-top: 160px;
}
}
/* Adjustments for screen sizes of 401px and smaller */
@media (max-width:401px){
#randomClass1, #randomClass2, #randomClass3{
margin-top: -190px;
padding-top: 190px;
}
}
/* Adjustments for screen sizes of 317px and smaller */
@media (max-width:317px){
#randomClass1, #randomClass2, #randomClass3{
margin-top: -220px;
padding-top: 220px;
}
}
The adjustments work perfectly on all resolutions and browsers except for mobile Safari. On Apple devices with resolutions below 780px (tested on iPhone 12 in horizontal mode), the margin-top seems too low. How can I resolve this issue, considering it only occurs in Safari? Is there a way to modify the CSS specifically for this browser?
Alternatively, is there a more effective method to add an offset to HTML anchors that would ensure consistent display across all browsers?