Newest 'media-queries' Questions - Stack Overflow

Questions tagged [media-queries]

Media queries enable the conditional application of CSS styles based on media types, such as screen and print, and the conditions of media features, such as viewport and device height and width. They are part of the W3C CSS3 specification.

0
votes
0answers
4 views

What OS or Chrome setting controls the value Chrome sets prefers-reduced-motion to in an RDP session?

Chrome 74 introduced support for the prefers-reduced-motion media query. On Windows 10, the value Chrome uses for this setting appears to be controlled by the OS setting "Settings > Ease of Access > ...
0
votes
1answer
17 views

How to override all classes within in a media query?

I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this ...
0
votes
2answers
26 views

Media queries not working in specific IE query

I am trying to use media queries in only one browser (IE) but nothing I have tried is working. For example: @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Styles ...
0
votes
0answers
31 views

Which media query method is more efficient? [duplicate]

I have a website and I created a mobile theme for it. Basically, my CSS file is currently split into three sections: 1) General styles, 2) Desktop/laptop-specific styles, and 3) Mobile-specific styles....
0
votes
0answers
6 views

Optimizing E-mails for Mobile Using Only Inline CSS (PHP Slim)

I'm currently working on a website where a user can sign up for an account. When the user signs up, they will receive a welcome e-mail. This website was developed with PHP Slim. This is my first time ...
1
vote
1answer
32 views

Making css-doodle responsive with media queries

I've set up a background for my page using css-doodle. It looks fine when on full screen but because of the way my grid is set up, the shapes get smaller along with the screen and are completely ...
0
votes
1answer
15 views

Responsive meta taking some fixed width even its not declared anywhere, it's showing after refresh. One time load working fine

I am using this meta to make the page responsive <meta name="viewport" content="width=device-width"> My application is using Angular and the meta is working fine once, but when I reload or ...
3
votes
0answers
36 views

Can media queries respond to user initiated zooming?

I've included a very basic snippet, which includes a row of flex items that collapses a column when the viewport width is less than 768px. If you open the snippet full page and then open the dev tools ...
0
votes
1answer
21 views

Orientation: Landscape showing true for desktop

Wondering why landscape specific styles are showing true when on desktop? I have styles specified under @media (min-width: 1024px) and (orientation:landscape). These were specifically for iPad ...
0
votes
0answers
44 views

Deal with media queries in CSS

I have this kind of problem: There's two media queries in my css file which are applied by the height of viewport because width is same on both phones but, i have an input in my html so when i click ...
0
votes
0answers
23 views

How to make prefers-color-scheme light use default color values?

Instead of defining all the changes on the prefers-color-scheme: light individually, how can I make it so that it automatically applies all the default bootstrap color values?
0
votes
1answer
30 views

HTML viewports vs media query

So far, my rule of thumb is to use viewport units for simple webpages, because it gives the website a lot of flexibility; but when the webpage is complex, use media queries. There are some ...
0
votes
1answer
16 views

media query not working in bootstrap mobile mode

I have a media query in my bootstrap website like @media (max-width: 688px) { .carousel-item>img { max-height: 175px !important; } } It worked before. But now it seems to be not ...
0
votes
0answers
28 views

Avoid tab focus on <a> elements with display: none (ie don't focus a hidden mobile nav)

I have a page with a two divs containing navigation links. Using media queries, I display one or the other depending on the screen width. So on a desktop, the wide nav is shown and the mobile nav has ...
3
votes
2answers
45 views

should i use media queries for responsive design with react?

I want to make a responsive website using react, should i use media queries for change layout and set display to 'none' for some components in mobile ( like regular html and css ), or do that in-react ...
1
vote
1answer
15 views

Javascript matchMedia returning opposite value on iPhone X + safari

I have a FAB(floating action button) with a fixed position on the screen, On safari for IOS the button ends up hiding behind the navigation bar at the bottom. 1. collapsed menu correct 2. expanded ...
0
votes
0answers
16 views

Email Media Queries that are Platform Specific

I've been testing some media queries in HTML emails, and I'm getting them to work in Outlook and Gmail. Did Outlook suddenly start supporting normal media queries? I can't find any documentation of ...
0
votes
0answers
9 views

How to fix problem with setting swiper position in the middle of div

I'm trying to set swiper in the middle of the div container, it looks like it's working just for iphone 5 width. I set up my one class for it but it doesn't work. Could anyone explain to me how to fix ...
0
votes
0answers
20 views

A jQuery function within media query not firing as expected

I am learning jQuery. I am using a media query. When I shrink the browser window all of the code responds as expected except for my nested function (that starts with $( "tr" ).each(function() {). If ...
1
vote
3answers
97 views

@media only screen and (max-width: --px) not working?

I want to give style to my web page when it is open on the device whose width is less than 620px but media query for 'width' is not working it is working for "max-height" but not for "width". media ...
1
vote
2answers
80 views

How to hide the horizontal scroll bar while scrolling in mobile

I have some lists that I am displaying in one line on desktop but on mobile, I have to display the same but it should be horizontally scrollable by swiping. I tried the below code using CSS. It's ...
0
votes
1answer
14 views

Handling and grouping CSS properties for different mobile breakpoints

Ok so this may be a very simple/obvious question, so I apologize if its a dumb question but didnt know where else to ask. But when using CSS and media queries for a responsive layout, should I re-use ...
0
votes
0answers
28 views

How to force desktop version on low resolution screen like beamer

I have classic bootstrap 4 responsive layout using col, col-md, col-lg, d-lg-none, etc.. and media queries like @media (max-width: map-get(@grid-breakpoints, lg)) How do I force full width view on ...
-1
votes
1answer
21 views

What is media query for nexus 7 and pixel 2?

I'm creating Ionic 4 Angular app, this app run near about 4 to 5 devices. now i'm unable to find perfect media query for nexus 7 and pixel 2. give me some suggestion or media query for this 2 dives ? ...
0
votes
3answers
52 views

function based on screen size [closed]

onClick on button pops up a registration form. the problem is that I need to do it only when the screen size is 1440px and more. <a href="#" class="button"onmousedown="viewForm()">start</...
0
votes
1answer
28 views

How do I calculate the px value for a media query of a special phone?

How is the px value for media-query calculated? For example: iPhone 7, 8 and X = 375px media-query iPhone X has the following specs: 1.125 x 2.436 Pixel -5.8 inches -463 dpi So why is the media ...
0
votes
0answers
9 views

Display differents in developper test mode between two screens with Chrome

I want to display accès to others screens using grid to get a concluant result with Chrome in developer mode. The first time, the display is ok but later, the display doesn't have the same size ...
1
vote
1answer
38 views

CSS media query not working in Rails mailer template

Does media query really not working in email template? I have simple test template and a query BUT can't make it work. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....
0
votes
0answers
6 views

How to programmatically trigger media query on `pointer: coarse` and `hover: none` on desktop?

I'm building tests for visual review of mobile web pages, but the pages will be reviewed on desktop. My responsive media queries detect for pointer: coarse and hover: none. When viewing these pages on ...
0
votes
1answer
18 views

Executing Twig statements from within a MatchMedia JS function?

Is it possible to execute Twig 'include' statements from within a Javascript MatchMedia Query? Am trying to get round another issue by simply rendering a different menu type at our tablet breakpoint....
0
votes
1answer
51 views

How do I “refire” jQuery(window).resize(checkSize)?

I'm trying to add and remove classes depending on a CSS rule for screens 500px and smaller. In CSS, I use @media (max-width: 500px) { .evidence img {display:none;} } and this jQuery function looks ...
2
votes
2answers
45 views

two screen widths: 375px and 1024px

How do I build a website at two screen widths: 375px and 1024px? the website need not respond to widths between the two. @media only screen and (min-width : 375px) and (max-width : 1024px) As far as ...
0
votes
1answer
41 views

Why does white space appear when I remove these elements?

In the menu section I have a design of triangles on the left and right side of the page. When the screen gets to the width of 775px I set a media query and make these designs disappear with display: ...
0
votes
0answers
18 views

Can't target non-widescreen display with media query

I'm trying to define a media query for non-widescreens, however I can't seem to get the rules right. I've got a square screen, that I'm testing this on. I tried (min-aspect-ratio:4/3), however that ...
1
vote
3answers
43 views

Why can't I remove the background-attachment property?

So I'm trying to remove the background attachment property with a media query at a max-width of 1024px. I'm doing this just by going background-attachment: none except my devtools is flashing an error ...
0
votes
2answers
34 views

I dont know why my `max-width: 470px` media query isnt working

I do not know what to do for it to work. I have been trying to make some stuff more specific and others more generalised yet it isnt working. Please check my code and any advice or help is much ...
0
votes
0answers
19 views

Change max-width media queries to min-width

I initially used max-width media queries designing a navbar. The codebase I'm designing it for is using min-width. Is there a programmatic or logical way I can change them? Aside from re-writing the ...
1
vote
0answers
37 views

Firefox: How to test prefers-color-scheme?

In Firefox 67, one can use media queries to detect user preference on light or dark theme. In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following ...
1
vote
2answers
48 views

CSS media query looks good locally but not when hosted online

Locally my banner-home2.png looks as I need it. However, when uploaded it's size gets bigger. (I'm hosting this on heroku, but the css file is on Amazon). And I can see that in these Codepen, it ...
0
votes
0answers
25 views

Material UI / Bootstrap Grid Print Preview Chrome Always Shows XS layout

When I try to print anything with a page that has implemented Grid with default breakpoints, it renders the xs layout on Chrome, I believe due to the print window being something like 750px. Is there ...
0
votes
0answers
21 views

Using PNG instead of JPG images to fix Outlook rendering issues?

Our HTML email templates look great in every ESP except outlook 120 DPI. The suggested blog tips to this point have not worked. Has anyone tried using PNG images instead ofJPG images in their emails? ...
0
votes
1answer
29 views

How to fix jQuery media query that works with console.log() but not proper code

I am trying to change the background image of an element based on screen width and the reason I can't use CSS is because the image path is pulled in to the template using PHP. I have tried several ...
0
votes
0answers
16 views

Select one of two layouts depending on screen width

I have two different layouts in CSS. One is for mobile (and other narrower screens) and the second one is for desktop. Width of the layout depends on screen width. /* mobile */ @media (max-width: ...
-1
votes
0answers
29 views

How to differentiate media queries to different-different devices?

I'm creating Ionic 4 Angular app , I added media queries for pixel 2 [@media (max-width: 720px) and (min-width: 410px)] ,but this media queries also apply on IPhone 6/7/8 plus. how to overcome this ...
0
votes
0answers
27 views

How can I encapsulate svelte app within iframe of svelte app?

A svelte app targeted for mobile will be emulated online (a mobile drawing with the actual app rendered inside). Because of media queries (which don't work since the app is the whole page and not just ...
1
vote
2answers
36 views

Expand all PrimeNG Accordion panels automatically for Printing

I am currently using the PrimeNG library's accordion component in my angular project. See info here. The template includes some special css styling for printing the page--something like the following:...
0
votes
1answer
16 views

Why does the media query which works in devtools “toggle device toolbar” mode doesn't work in Chrome browser?

There is no problem when examining the part of my code related to media query in devtools "toggle device toolbar" mode. But after closing the preview, I found that the code didn't work in browser. ...
-2
votes
0answers
14 views

Must you account for screen height when making a website responsive?

I've had two websites now that have been causing me problems. In each site the header stretches 100vh. Each has a background image on the header. My most recent one looks like this. https://imgur.com/...
0
votes
1answer
21 views

Style “splitting” at breakpoint, mediaqueries

I'm working on developing a style for a site and I'm using media queries as breakpoints. At the breakpoint, the page suddenly decides to listen to some style from the first interval, and some from the ...
4
votes
1answer
62 views

Media queries not working with styled components in React App

I'm having trouble getting media queries to work with media templates and styled components. I defined a MediaQueries template straight from the docs: MediaQueries.js import { css } from "styled-...