I need some help figuring out something i guess pretty basic. I completed setting up my page, and now see that it is perfectly positioned on brave yet it has a incorrect setup on safari. all of this on desktop.
if you check on brave the big hero image, wine bottle in a hand, sits quite well on the canvas, while in safari it is smaller and leaves some space between the image and the navbar on top… the site is actually live: www.kintonatural.com and its also visible there.
does someone have some advice for me on how to best homogenise the setup?
The issue you’re experiencing is likely due to differences in how Safari and Brave (Chromium-based) handle CSS properties, especially viewport height (vh) units, image rendering, or flexbox alignment
To fix the issue with the hero image appearing differently in Safari, check the CSS for the hero section and ensure consistent sizing by using pixel-based values (px) instead of viewport units (vw, vh). Add -webkit- prefixes to CSS properties like transform and background-size for Safari compatibility. Use object-fit: cover and set explicit width and height for the image. If using Flexbox or Grid, ensure properties like align-items, justify-content, and grid-template are explicitly defined. Normalize styles with a reset like Normalize.css. As a last resort, target Safari with specific media queries using @supports (-webkit-appearance: none). Clear Safari’s cache and test again. If you still face further issues please feel free to contact.
