media-queries Questions
1
Using @mui/material/useMediaQuery in Next.js causes style flickering on first rendering.
I know this is due to the useMediaQuery value changing between server side and client side.
Is there any way...
Octahedron asked 9/6, 2022 at 9:33
6
Solved
Of late, I've been designing sites that are more responsive and I've been using CSS media queries frequently. One pattern I noticed is that the order in which the media queries are defined actually...
Rolfston asked 9/1, 2012 at 14:56
4
To maximize efficiency for mobile devices, I would rather not have images that are used for the desktop version. Through research, I have learned that simply using display:none; css or jQuery('img'...
Octans asked 17/9, 2013 at 19:11
3
Solved
I am a newbie to responsive design using CSS3 media queries. I clearly understand how we target different devices using these media queries but the place where i am confused is BROWSER ZOOMING!!.
...
Yandell asked 6/3, 2014 at 11:59
1
This one is giving me a headache..
Perhaps I'm just missing something silly, hope you guys can help.
The whole html element has a width of approximately 80% of the screen on mobile devices.
On a la...
Sourwood asked 29/5, 2021 at 2:12
1
I would like to write these media queries in tailwind in a custom css file:
@media screen and (max-width: 766px) or {}@media screen and (min-width: 767px) {}
I figured out that the correct way is...
Casandracasanova asked 31/8, 2023 at 9:43
23
Solved
I'm attempting to make a printable stylesheet for our app but I'm having issues with background-color in @media print.
@media print {
#header{display:none;}
#adwrapper{display:none;}
td {
bord...
Carrillo asked 8/10, 2010 at 20:13
7
Solved
I'm using bootstrap to create a mobile first responsive layout and have various rows and columns set up that I adjust for the different categories of screen size.
I am wondering if there are pure ...
Antifebrile asked 25/9, 2017 at 19:11
11
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
@media only screen and (max-width:1400px) {
.heading...
Amphi asked 8/6, 2015 at 10:11
3
Solved
I'm doing a mobile website now and trying to target different devices using CSS3 media queries. Part of my code is as follows:
@media screen and (max-width:320px) {
body {
width: 320px;
}
/* some...
Phira asked 26/2, 2013 at 17:48
12
Solved
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its s...
Newton asked 3/9, 2012 at 17:2
7
Solved
Similar to "How to detect if OS X is in dark mode?" only for browsers.
Has anyone found if there is a way to detect if the user's system is in the new OS X Dark Mode in Safari/Chrome/Firefox?
We ...
Fleer asked 13/6, 2018 at 14:47
3
I have a logo inside the Logo tags. For printing style i made a @print media query css. If i print it out the logo will printed on every page - but it should only shown on the first page.
Tried wi...
Thorny asked 8/12, 2016 at 11:59
8
Solved
My media query does not override the regular CSS unless I use !important all the time. What's the error? Here you can see the CSS with the !importants. If I remove them, the styling goes back to th...
Deannedeans asked 23/8, 2015 at 13:45
4
Solved
Is there a simple way to target landscape mobile devices without affecting desktop ones, without entering the screen size for every device?
If not, is there a single best resolution to target most ...
Nightmare asked 3/6, 2020 at 20:30
6
I am hoping to get rid of media queries and just use flexbox to solve my problem, but I'm not sure if this is possible. As the window gets smaller, I want the columns to shrink until they hit their...
Deejay asked 14/4, 2017 at 23:43
14
Solved
What is the safest way, using media queries, to make something happen when not on a touchscreen device? If there is no way, do you suggest using a JavaScript solution such as !window.Touch or Moder...
Brigidbrigida asked 9/7, 2012 at 0:20
5
Solved
I have in a webpage which is responsive. It makes use of media queries.
But the same page loaded in an iframe is not working.
For example, consider to my webpage, I have given background color as...
Panhellenism asked 1/12, 2014 at 11:17
2
Solved
I have a text (in a div) which shows on desktop and mobile screens.
Expected
I want the text to only show in @media only screen and (max-width: 768px)
How to
hide the div with display:none or
...
Leporide asked 20/1, 2018 at 16:7
5
Solved
Chrome 76 has added support for prefers-color-scheme media query (a.k.a. "dark mode").
But how can I test my webpage in both color schemes easily, without toggling the system dark mode on and off...
Greeson asked 22/8, 2019 at 10:11
2
Solved
I have some list items set to min-height: 12em - for desktop
When sizing down for tablet / mobile screens I want to reset this to: min-height: auto
However iPad / iPhone is ignoring this and main...
Warrantable asked 23/4, 2013 at 11:9
22
Solved
I have been doing some research on media queries and I still don't quite understand how to target devices of certain sizes.
I want to be able to target desktop, tablet and mobile. I know that the...
Asceticism asked 16/6, 2011 at 10:57
2
Solved
I am working on a layout that needs precise media query handling. One of my issues is the crossbrowser scrollbar width as it is different according to browsers and most (all of them?) include it in...
Ophidian asked 20/4, 2014 at 9:20
9
I have these two but they are not working. I'm simulating in Chrome
/* Landscape*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel...
Overcrop asked 1/2, 2017 at 11:19
5
Solved
I want to use abbreviation of days in small screen size.
For example when screen is shrinked I want to change 'Saturday' to 'Sat'.
How can I do this?
Tinware asked 6/10, 2016 at 11:3
© 2022 - 2024 — McMap. All rights reserved.