There is a website on wordpress , where I register bootstrap styles and my own style in my own theme through the functions.php file

 // регистрируем стили add_action( 'wp_enqueue_scripts', 'register_plugin_styles' ); // регистрируем файл стилей и добавляем его в очередь function register_plugin_styles() { wp_register_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_enqueue_style( 'bootstrap-css' ); wp_register_style( 'style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'style' ); }

style.css spelled out in style.css, and successively it appears later on bootstrap.css

 .navbar-inverse .navbar-nav>li>a { padding: 34px 7px 38px; } @media screen and (min-width: 1310px) and (max-width: 1366px) { .navbar-inverse .navbar-nav>li>a { padding: 34px 15px 38px; } } @media screen and (min-width: 1440px) { .navbar-inverse .navbar-nav>li>a { padding: 34px 10px; } @media screen and (min-width: 1600px) { .navbar-inverse .navbar-nav>li>a { padding: 34px 15px; } } @media screen and (min-width: 1680px) { .navbar-inverse .navbar-nav>li>a { padding: 34px 20px; } } @media screen and (min-width: 1920px) { .navbar-inverse .navbar-nav>li>a { padding: 34px 31px; } }

But I can’t understand why on some computers and laptops media requests are triggered and visible through the code editor (15 inch laptop), and not on some, only the bootstrap media requests are visible (laptop 13 - 1366px resolution, PC with monitor 22 - 1920px resolution) and accordingly do not work ..

on services like screenfly, it runs on all permissions.

I tried to remove the screen - the effect did not give

  • You have between 1366px and 1440px gap @media . Why did you do it? - Visman Nov.
  • @Visman because there are other media queries, but I decided not to clutter up. even if I put @media screen and (min-width: 1310px) and (max-width: 1440px) {} essentially it does not change .. - Vasya
  • Open the developer tools in that browser on the computer in which the @media styles do not work and look at this element with which style it is interrupted and from which file. - Visman Nov.
  • The fact is that @Visman isn’t interrupted, but there aren’t, there aren’t any, you know, as I wrote in the description, but these are taken: .navbar-inverse .navbar-nav> li> a {padding: 34px 7px 38px ; } even if you manually reduce the screen or switch to the toogle device toolbar and from the bootstrap media queries while reading, so it's not about the computers - Vasya

2 answers 2

Most likely, the site is viewed at a scale not 100%.

Chrome shows the actual size, but the page and media queries on it work see other sizes. For example, if a page is open in a 1000px wide window at a scale of 200%, then its width is 500px.

  • yes, you are right - thanks! the scale was 110% by eye not visible, but the difference in display is already significant - Vasya

The answer will find, but why so - I do not understand. through f12 but 13 shows the resolution of 1366px (and it has always been like this before), but the media request takes between 1310px and 1310px , i.e.

 @media screen and (min-width: 1200px) {}

why? - not at all obvious ... question to the experts

  • Do not confuse the screen resolution and the width of the browser window. Even a full-screen browser will have a width = resolution minus the width of the scroll, etc. - alenkins
  • @alenkins I'm not confusing anything. it is even funnier that on the same computer, but already in ie , and not the chrome shows a resolution of 1366px, i.e. takes info from this media query @media screen and (min-width: 1366px) {} - Vasya
  • in both cases the browser has a scroll? or in both cases in the browser there is no scroll? which displays console.log(document.body.clientWidth); ? - alenkins
  • @alenkins as suggested above - the scale was 110%, instead of 100 - Vasya