Applying media queries to incorrect screen sizes

My media query seems to be behaving oddly.

@media only screen and (max-width: 1200px) {
    .tool-panel {
        margin: 0px 24px 0px 0px;
    }
}

It is getting applied at 1183.20px instead of 1200px. This discrepancy is consistent across all browsers even when their zoom levels are set to 100%.

The non-integer width is quite unusual for me, as I have always worked with whole numbers while debugging in a browser.

https://i.sstatic.net/avleW.png

Interestingly, the value of window.innerWidth in the console shows 1200 despite the browser displaying the width as 1183.20px.

css

Answer №1

At 1183.20px, the specified width of 1200px is being applied instead. This issue persists across all browsers, even with zoom levels set to 100%.

The CSS rule max-width: 1200px applies from 0 to 1200px. To restrict it to exactly 1200px and not 1183.20px, you can use min-width: 1200px.

//                      ↓↓↓
@media only screen and (min-width: 1200px) {
    .tool-panel {
        margin: 0px 24px 0px 0px;
    }
}

If you're still experiencing issues, verify the presence of the following meta tag in your HTML:

<meta name="viewport" content="width=device-width, initial-scale=1" />

When checking window.innerWidth in the console, it appears as 1200 despite the browser displaying a width of 1183.20px.

You may find further information in this answer:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centralized Column Design with Bootstrap 4

Currently, I am using bootstrap 4 and have a row with 3 columns. The center column is set to col-7, but I need it to be flexible and take up all remaining horizontal space in the row. I attempted to use flex-col, but it caused issues with the layout. In th ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-grid

Displaying text on top of an image with the help of jquery and

I found a tutorial on this website that I'm trying to follow. It involves creating a fading/darkening effect on image rollover with text appearing, but I can't seem to get it to work even when starting from scratch. Despite having experience wit ...

jqueryhtmlcsshover

Organizing list items into vertical columns

Could you help me with UL/LI syntax and how to create a wrapping list? For example, I would like to display: 1 2 3 4 5 6 As: 1 4 2 5 3 6 Currently, I have a header, content, and footer all set with specified heights. I want the list to wrap when ...

htmlcsshtml-lists

CSS menu - Shifting bar: What's the issue?

I'm struggling to add a moving bar to my website's navigation and need some help. I tried following a tutorial at the following link: (http://css-tricks.com/jquery-magicline-navigation/) Here is what I ended up with: If anyone could take a look ...

jquerycssmenuslidernav

Issues with jQuery compatibility when used alongside HTML and CSS

My coding tool is flagging errors in my JavaScript file, including: -'$' usage before definition. -Incorrect spacing between 'function' and '(' This is the content of my JS file: $(document).ready(function() { $(window).s ...

javascriptjqueryhtmlcssbootstrap-4

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

There is a significant spacing issue between the header and main category when viewed on a mobile device

Experiencing issues with element distances on different screen sizes? While the website looks fine on normal screens, there's a noticeable gap between the header and main sections on mobile devices. See below for the provided HTML and CSS code. ...

htmlcssbootstrap-4

What are the steps to achieve the desired PrimeFaces theme appearance for selectOneMenu?

Need help with a JSF Primefaces project using the omega theme. The selectOneMenu dropdowns are not displaying correctly (missing line). Current look: https://i.stack.imgur.com/vF4ms.png Expected look: https://i.stack.imgur.com/hXsIB.png Any suggestion ...

cssjsfprimefacesselectonemenu

What is the best way to responsively center an after pseudo-element above its parent?

Looking to create a dynamic tooltip without any fixed widths or constraints on the parent element. The process seems simple enough, but I'm facing an issue with centering the after element due to an existing transform attribute of transform: translat ...

cssvue.jssasspseudo-element

When resizing the browser window, this single horizontal page website does not re-center

I am in the process of creating my very first one-page horizontal website using jQuery and the scrollTo plugin. This site consists of 3 screens and initially starts in the center (displaying the middle screen). To achieve this, I decided to set the width o ...

jqueryhtmlcssresize

Creating a menu header similar to Gmail's design is a great way to

How can I create a fixed menu similar to the one in Gmail? I've attempted using CSS, but the div remains centered instead of sliding up on scroll like the Gmail menu. View in full-size image I've experimented with CSS properties, here's an ...

javascripthtmlcssgmail

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

htmlcssangularangular-ui-bootstrap

All UL and LI elements are aligned horizontally both before and after

Our website designer is looking to create a vertical UL / LI list that matches the design in the image below. However, when using this style, I ended up with: The result looked like this: <style type="text/css"> ul { list-style: none; } u ...

htmlcss

What could be causing the vertical alignment issue of this logo in its parent container?

I am having an issue with the vertical centering of the logo element within the <header> container on this page. It seems to be more pronounced on mobile devices compared to desktop. However, the second element (#forum-link) is aligning correctly. W ...

htmlcssresponsive-design

Using Javascript/HTML to enable file uploads in Rails

I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...

javascriptjqueryhtmlcssruby-on-rails

Steps to fully eliminate the recent action panel from Django's administrative user interface

Is there a way to completely remove the recent action panel from Django admin UI? I have searched extensively but all the information I find is about clearing the data in the panel from the database. What I'm looking for is a way to entirely eliminate ...

pythonhtmlcssdjango

What are the best practices for implementing the CSS id selector?

As someone new to web development, I am facing an issue with my code where the CSS id selector is not functioning as expected: li { border: 3px solid red; } h3 { background: green; } #special { color: green; } <h3>Todo List</h3> < ...

htmlcss

Mpdf does not support inline CSS rendering

I recently implemented Mpdf into my Symfony project using Composer. The installation process involved running the following command: composer require mpdf/mpdf Next, I included the Mpdf.php file in autoload.php. Here is an example of how to use Mpdf in ...

phpcsssymfonympdf

delete the initial background color assigned to the button

The "ADD TO CART" and "save design" buttons are currently displaying as shown in the image below. I would like to make the "SAVE DESIGN" button look similar to the "ADD TO CART" button, meaning I want to remove the background-color and dot symbol. Code ...

htmlcss