Media Query Colliding design
guys need help, I having some issue on my tab landscape orientation and laptop view design they're colliding, can someone pls help me,
I don't know if the pixel ratio is the problem, the design from galaxy tab s6 lite when it is landscape orientation is applying the design from laptop and the laptop view is applying the design in tablet.
@media only screen and (min-width: 1280px) and (max-width: 1368px),
only screen and (min-width: 1280px) and (max-width: 1368px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width: 1280px) and (max-device-width: 1368px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1)
code above is from tablet media query
@media screen and (min-width: 1280px)
and (max-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1)
and this is from laptop media query
7 Replies
Your mediaqueries all use
min-device-pixel-ratio, so any device with 1280px would use the last mediaquery. (-webkit-min-device-pixel-ratio: 1 is probably useless)
That would only explain why the tablet takes the second, not why the laptop takes the first.
Except for if your laptop has less than 1368 CSS-pixels and the laptop media query comes first in your code. And the tablet has a higher resolution than 1368 CSS-pixels.
You can test this if you change the dpr in devtools (you may have to add them via the three dots) or display scale (100% = 1dpr)Can I ask, what differences do you want between your tablet and laptop? From what you ahve there, both cover a lot of the same sizes (which is why the second one is winning, as Wolle mentioned)
Also, unless you have a very good reason to, targeting devices is usually a pretty tricky business (like, what if someone is on a slightly smaller tablet? Or what if I'm on a desktop, but my window is small enough to meet the "tablet" criteria, etc)
can I drop my github respos here? so you can see the code.
on tablet landscape mode I want it to be like this but on other tablets like galaxy tab s6 lite it doesn't apply
but to the other tablets devices like ipad are all okay
and for the laptop design I want it to be like this.
sorry for my face hehe😆
I also have two about divs container the first one is for laptop and desktop mode and the second one is for mobile and tablet mode, so when the screen is smaller I set the 2nd container which is the about-responsive div class name I set it to display block
I'll try use this thank youu so much
thank youu so muchhh