css is different for chrome and firefox in mobile

Question

I am working with wordpress Sydney theme, and I am trying to make a responsive website, I realized that it shows different css on different browsers.

here is an example: chrome firefox:

here is with chrome again when I try to check the responsiveness:

here is with chrome on a different computer[*] this is how it should look like everywhere:

and here is with edge:

i am not sure what is causing this to happen, the website is haagsehof.nl.

I have made some custom css for different devices like this for the responsiveness:

@media (min-width:767px){
}

@media (max-width:766px) and (min-width:400px) {
}

@media only screen and (max-width: 399px) {
}

how can make all the browsers in different devices all use the same css format so the website looks alike in every platform?

Answer 1

I don't know to go about this in wordpress, but in general the following applies.

You would have to add code for everything that doesn't work in a specific browser. So you might have to use -moz- or -webkit- and than just add the code. It's quite annoying that browser have different default values and sometimes even need prefixes.

Answer 2

As well as what @René Steeman said, some Wordpress themes will not allow you to access the CSS file. I would check and make sure you are able to do this first otherwise choosing a different theme may be the easiest way to fix this in all honesty.If you can access the CSS Rene is right. You can change how things look for each browser. Finally you may want to reference this list: https://www.w3schools.com/cssref/css3_browsersupport.asp. Not all CSS features are able to be used on each browser. On top of all of this your browser may need to be updated as well. Best of luck!