derrida
asked on
advice regarding media queries
Hi
i have 3 break point at the moment:
1- max-width: 480px (smartphones)
2- min-width: 481 (tablets)
3- min-width: 769 (desktop)
the issue: on smartphones and tablets my horizontal drop down menu becomes a vertical list that is opened by clicking on a menu link. all works but: on a 7 inch tablet LANDSCAPE and 10 inch tablet LANDSCAPE, the regular menu appears. and hover does not work on touch devices.
i have tried to make the desktop start with min-width: 1025, and it works but i do not want people with small PC screens to get the tablet list.
is there a way around it? or with todays PC screens, most likly people will not get the list?
best regards
i have 3 break point at the moment:
1- max-width: 480px (smartphones)
2- min-width: 481 (tablets)
3- min-width: 769 (desktop)
the issue: on smartphones and tablets my horizontal drop down menu becomes a vertical list that is opened by clicking on a menu link. all works but: on a 7 inch tablet LANDSCAPE and 10 inch tablet LANDSCAPE, the regular menu appears. and hover does not work on touch devices.
i have tried to make the desktop start with min-width: 1025, and it works but i do not want people with small PC screens to get the tablet list.
is there a way around it? or with todays PC screens, most likly people will not get the list?
best regards
Last Comment
ASKER
hi
i have no link to give you.
i am not expecting a one all solusion.
can i use min-width for the desktop and min-device-width for tablets? and if so can i use styles for min-width: 1025px for the desktop and at the same time min-device-width: 769px for tablets?
the thing is that there are so many screens so its not a good idea to be very specific. my layout is percentage based. so i just wanted one for smartphones one for tablets and one for desktops.
best regards
i have no link to give you.
i am not expecting a one all solusion.
can i use min-width for the desktop and min-device-width for tablets? and if so can i use styles for min-width: 1025px for the desktop and at the same time min-device-width: 769px for tablets?
the thing is that there are so many screens so its not a good idea to be very specific. my layout is percentage based. so i just wanted one for smartphones one for tablets and one for desktops.
best regards
without the speecifics the best I can do is give you a link to a page with most of the alternative covered, and then you can see what you are able to apply to your situation.
http://css-tricks.com/css-media-queries/
Cd&
http://css-tricks.com/css-media-queries/
Cd&
ASKER
thanks for the link.
i found this information: stats
this means that only 10% of the regular PC users will face the tablet menu on their PC, right?
if i am right in understanding this stats that is not such a bad thing, if they do see that menu instaed the menu of heigher screens, no?
i found this information: stats
this means that only 10% of the regular PC users will face the tablet menu on their PC, right?
if i am right in understanding this stats that is not such a bad thing, if they do see that menu instaed the menu of heigher screens, no?
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
CSS
Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.
43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
If you are expecting just media queries to solve all your cross-platform resolution issues, you will be disappointed because you need to deal with content and quirks; and not all devices respond the same way to given code. You can get several devices to operate correctly with common code, but the more devices and resolution you need to support, the more likely it is that you will need to do device specific code.
Cd&