different css on different browsers and devices, responsiveness

Question

I am trying to make a website responsive with WORDPRESS, so when checking the website with different devices and using different browsers, every where the same css is used.

So I decided to use the following format to divide my website into 3 different section for normal pc, tablets and smart phones:

@media (min-width:767px){}
@media (max-width:766px) and (min-width:400px) {}
@media only screen and (max-width: 399px) {}

then for different browsers I am doing:

/*edge*/
@supports (-ms-ime-align:auto) and (max-width:400px)  {}
/*chrome*/
@media (-webkit-min-device-pixel-ratio:0) and (max-width: 766px) and (min-width: 400px) {}

the problem is I cant make the same for opera and firefox, I mean I made this for firefox:

/*firefox
@supports (-moz-appearance:none) and (max-width: 399px){
    #pg-4-0{
        height: 1400px!important;
    }
    #newROW{
        margin-top: 20px;
    }
}
*/
/*
@supports (-moz-appearance:none) and (max-width: 399px) {
    #pg-4-0{
        height: 1150px!important;
    }
    #newROW{
        margin-top: 20px;
    }
}
*/

but it wasnt working correctly and I had to remove it. Is this correct way of implementing the responsiveness?

is there a better way to do this?

how can I do this for firefox and opera? (I made the website using wordpress: https://www.haagsehof.nl/)

cabrerahector · Accepted Answer · 2018-03-07T15:05:03.797

Is this correct way of implementing the responsiveness?

is there a better way to do this?

Can't say if this is the best way to go about it but here's my advice: don't do browser detection. It's a cat-and-mouse game, you'll never see the end of it.

Back in the days when IE was a popular browser (eww), we had to do browser detection to apply custom "hacks" to make sure sites looked & behaved mostly the same on all major browsers - including Internet Explorer itself.

However, nowadays most major browsers follow the same web standards and so most CSS rules / properties behave pretty much the same way in every one of them so browser detection isn't really necessary anymore. What we do now is feature detection: check if the browser supports a given feature (eg. multiple background images), and if it doesn't then provide a suitable fallback.

Also, to make sure every HTML element behaves & looks the same way in most modern browsers (since each browser often has their own set of default CSS rules) independently of what screen resolution is being used you can use CSS resets which -as the name implies- resets the styling of all HTML elements to a consistent baseline. Personally, I prefer using normalize.css as it isn't as aggresive as CSS resets are and also includes a few useful rules.

Finally, here's a nice article from Google on Responsive Web Design that should help get you on the right track: Responsive Web Design Basics.

will this work with wordpress? can u please look at my previous question : https://stackoverflow.com/questions/49097415/css-is-different-for-chrome-and-firefox-in-mobile/49097949?noredirect=1#comment85201212_49097949 and then tell me which approach is better? — S. N, Mar 07 '18 at 15:07
Of course. WordPress is just a PHP framework - CSS is the same for every web page regardless of what's behind it. — cabrerahector, Mar 07 '18 at 15:09
but does itt mean that I have to add to every page in my wordpress? — S. N, Mar 07 '18 at 15:10
No. My answer above is a general advice on Responsive Web Design since your question was "Is this correct way of implementing the responsiveness? is there a better way to do this?". The answers you got on your other question pretty much say the same thing I answered here. You really should spend some time reading the links I left in my response, it'll help you understand how to fix your theme. — cabrerahector, Mar 07 '18 at 15:18

different css on different browsers and devices, responsiveness

1 Answers1