media-queries Questions
4
I am trying to display a solid background color when I print.
I have used
@media print {
height: 100%;
min-height:100%;
background: #CCC;
}
And activated "print background graphics"...
Thermomagnetic asked 18/5, 2015 at 2:9
4
Solved
I am trying to get my 2 divs (which are side by side) to change to stacked divs when viewed on mobile as shown in the fiddle, but I would like "two to be on top and "one" to be second.
Here is the...
Costanzia asked 10/7, 2015 at 14:49
3
Solved
I'm building an editor where the content of a post is loaded in a div, and jQuery selectors allow me to edit the content inline.
I just ran into a bit of a hurdle as I was trying to add some respo...
Archil asked 1/9, 2011 at 14:28
16
Solved
How do I do the following CSS media query in Reactjs?
.heading {
text-align: right;
/* media queries */
@media (max-width: 767px) {
text-align: center;
}
@media (max-width: 400px) {
text-al...
Burghley asked 2/2, 2019 at 9:19
6
Solved
I have:
body { background: white; }
To display dark mode, I use .dark class:
.dark body { background: black; }
And to detect if user has their OS set to use dark theme, we have prefers-color-sche...
Assume asked 25/1, 2022 at 8:1
10
Solved
Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.
iPad - 1024 x 768
LG Pad - 1280 x 768
Galaxy Tab - 1280 x 800
I want to target iPad only using ...
Orangeman asked 25/11, 2011 at 15:55
3
Solved
I would want to use the new CSS container queries in modern Safari/Chrome browser. (Safari 16.3, Google Chrome 113.0)
However container queries based on height are not working as expected.
Expected...
Hydro asked 10/5, 2023 at 19:27
3
The use of grid-template-columns: repeat(auto-fit, minmax(600px, 1fr)) makes it easy to build a responsive CSS grid. The container will be filled with as many elements fit into a row, without using...
Tripedal asked 26/12, 2017 at 17:18
5
Solved
How should I deal with responsive breakpoints as components in Tailwind?
Without Tailwind, I used to declare breakpoints as a scss mixins:
@mixin tablet-portrait {
@media (min-width: 700px) {
@...
Rheostat asked 6/4, 2019 at 16:59
6
Solved
How do we space out media queries accurately to avoid overlap?
For example, if we consider the code:
@media (max-width: 20em) {
/* for narrow viewport */
}
@media (min-width: 20em) and (max-wid...
Tola asked 5/11, 2012 at 22:37
9
Solved
I'm trying to combine the use of a Sass variable with @media queries as follows:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171...
Gregoriogregorius asked 3/2, 2012 at 0:41
6
Solved
I'm trying to use a next/image instead of a regular img tag in the code below. With the regular <img> tag, the following achieves exactly what I'm looking for:
<div>
<picture>...
Zinnes asked 1/3, 2022 at 19:48
5
Solved
I'm using window.matchMedia conditional in order to avoid the inject of a video in mobile devices. CanIUse reports that matchMedia is going to work smoothly since Safari 9 (I'm testing on it), but ...
Stagecraft asked 1/3, 2016 at 9:47
14
I have a project that I am using the fixed background image. It works great on everything except ios7. On the ipad the background image is zoomed in and blurry. Here is the CSS code I am using -
....
Great asked 7/12, 2013 at 16:18
4
Solved
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly ...
Resolutive asked 21/10, 2012 at 22:15
18
Solved
I am implementing a dark mode, as macOS, Windows and iOS have all introduced dark modes.
There is a native option for Safari, Chrome, and Firefox, using the following CSS media rule:
@media (prefer...
Bing asked 24/5, 2019 at 22:28
12
Solved
I am trying to use CSS variables in media query and it does not work.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Liles asked 21/11, 2016 at 14:47
4
Does anyone know why my media queries code doesn't work ?
<div class="box"></div>
.box {
background-color: red;
width: 100%;
height: 50px;
}
@media only screen and (max-...
Yardmaster asked 29/1, 2014 at 20:31
7
Solved
I'm trying to make my responsive CSS styles work only on tablets and smartphones. Basically I have a style for desktop, a style for mobile: portrait and a style for mobile: landscape. I don't want ...
Odometer asked 25/2, 2013 at 6:49
5
Solved
I'm trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px. I know this is probably extremely simple and I am missing something ...
Rebeca asked 23/12, 2012 at 5:13
6
Using the below, Chrome is not respecting the media queries to display the correct video source based on the device width. Chrome is just playing the first source it finds as you can see here: http...
Cosmetic asked 18/9, 2014 at 8:38
6
Solved
I noticed a difference between css media query definition and the javascript window.matchMedia media query definition:
The css rules are apllied initially to a loaded page.
The rules defined in j...
Justly asked 23/4, 2018 at 20:49
6
Solved
I am using next/image to render my image like this:
<Image
src={imageLink}
width="1920"
height="512"
alt="Hero Image"
/>
This is fine for screen widths...
Epiphora asked 22/10, 2021 at 15:21
6
I have this html and css code:
<div class="wrapper">
<div class="a"></div>
<div class="b"></div>
</div>
@media all and (max-width: 400px), (max-height: 300px...
Laryngitis asked 27/3, 2013 at 9:37
4
Solved
I've panned through countless solutions to this problem and none of them have fixed my issue. I very simply have a navigation bar, which, when on a mobile browser, disappears and becomes replaced w...
Disagreeable asked 12/11, 2018 at 20:45
1 Next >
© 2022 - 2024 — McMap. All rights reserved.