Questions tagged [Media queries] (1)

There is a site which is written for the desktop, you now need to make it adaptive for mobile devices. I do so: @media screen and (max-width: 800px) { * { display: block; /* just checking */ } } My problem is that these styles do not apply without !important. I understand that this is because the styles I write with a...

Good day! Faced with such a situation: incorrectly displays a media queries on different devices in dev. tools in chrome. - works as expected - works as expected - not working as it should - not working as it should code looks like this. the breakpoints in media queries are: scss code and selectors are identica...

What is the correct plugin to group the @media without conflict with gulp-sourcemaps? To avoid confusion in the order of conditions. Now gulp-group-css-media-queries. a piece of gulp gulp.task("css", function () { return gulp.src("source/less/style.less") .pipe(plumber()) .pipe(sourcemap.init()) .pipe(less()) .pipe(gcmq...

Guys who may be stalknulsya have this problem. browser in 1500 px and here media have already triggered @media screen and (max-width: 1371px) delirium what is not clear from what.

When you open the Desktop Version of the site menu,if you resize on a smaller device appears to the Burger menu(tag "A" becomes display:none),if the menu is to open and close,when resize on the desktop version of the tag "a" is - display:none

Is it possible to create region Grid Area in the media queries? Is it possible to do so? Or if the Grid Area will be in the media queries, it to work nothing happens? Explain why I want to do exactly: The field I need in order to be able to move them, but only for the mobile version. snippet

As far as I know Macs have a resolution of 5120x2880. But as I understand it, browsers use scale. In General I would like to know exactly how much is in CSS pixels. You can see it by typing in the browser console, if possible: window.innerWidth window.innerHeight

Make a simple widget as an image to embed on other sites. the <div> <a href="https://site.ru/"><img src="https://site.ru/image.png" width="100%"></a> </div> Widget will be inserted in 2 places someone else's site, in the sidebar (the larger image) and the footer (the smaller picture). But we ...

There is a picture on the website, inserted in this way: <picture> <source srcset="img/cat-before-desktop.png" media="(min-width: 1440px)"> <source srcset="img/cat-before-table.png" media="(min-width: 768px)"> <img class="example__before" src="img/cat-before-mobile.png" alt="Fat cat"> </picture...

The first time faced with such a problem, it is unclear why styles smaller, do not overlap more