Website looks different in Chrome vs Safari

[Patrick]

Hi… just made two screenshots of a couple different views of a website that I’m building. I noticed that the website is looking different in Chrome vs Safari. Is there a setting that I should follow or do I need insert some extra css in order to get the website look the same over different browsers?

Mobile (Safari) via Apple also doesn’t show the correct design than it supposed to.

Chrome design (contact form - pink text fields)

Safari design (contact form - NO (CSS?) pink text fields)

Chrome design (sticky Yellow header)

Safari design (NO (CSS?) sticky yellow header)

Full website on www.mamalogisch.deideeenbakker.nl

Best,
Patrick

[rad]

Hi Patrick,

Thanks for reaching out.

For form styling, please check this https://stackoverflow.com/questions/40655074/styling-form-inputs-on-ios. Please add it along with your custom CSS, example

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    margin-bottom: 9px;
    border: 0px solid #ddd;
    padding: 7px .65em;
    font-size: 15px;
    line-height: normal;
    background-color: rgb(249,126,181,0.07) !important;
    font-family: "ff-meta-web-pro",sans-serif;
    color: rgb(249,126,181) !important;

-webkit-appearance:none;

}

As for header background, please change this existing custom CSS

.x-bar-is-visible {
    transition-property: height,opacity,transform;
    background: rgb(245,235,75,0.80) !important;
}

to this

.x-bar-is-visible {
    transition-property: height,opacity,transform;
    background: rgba(245,235,75,0.80) !important;
}

If they aren’t custom CSS then please provide your admin login credentials in the secure note.

Thanks!