The media query targeting a specific max-width and below appears to be malfunctioning

So, I'm experiencing an issue where the browser I'm using doesn't seem to be picking up the styles I've set for a max-width of 960px and below. Can anyone provide insights into what might be causing this? Any assistance would be highly appreciated. For reference, the browser in question is Chrome.

@media only screen and (max-width: 1920px) {
body { font-size:40px; }
.logo { width:33%;}
.article { margin-top:-79px; }
.article div:first-child { padding-left:255px; padding-right:255px; }
.products_section { margin-top:55%; }
.products_section div:first-child, .products_section div:nth-child(2){ padding:0 140px; }
.address { margin-top:9%; margin-bottom:12%; }
.address_content { padding-left: 140px; }
.address_content div:first-child { width:32%; font-size:40px; margin-right:300px; }
.address_content  a img { display:inline-block; width:23%; }
.address_content  a img:last-child{ margin-left:39px; }
}
<!-- more CSS media queries ... -->
@media only screen and  (max-width: 320px){

}
<!DOCTYPE>
<html>
<head>
<title>Koffee Korner</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<link rel="stylesheet" type="text/css" href="kk_css.css">
</head>

<body style="padding:0; margin:0; background:url(https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/aff8994c-8857-42f9-9710-4ee69a139dbe.jpg) no-repeat; background-position:inherit; background-size:cover; font-family:Rockwell;">
<div style="margin:9px; 9px 0 9px;">
<a href="https://www.koffeekorner.ca/">
<img class="logo" src="https://gallery.mailchimp.com/0e6cb285290458da56bd35739/images/083fdc0d-16ad-4a16-b0c8-cf61cd0d14a8.png">
</a>
</div>

<div class="article" style="width:100%; color:#fff; text-align:center;">
<div style="top:0; left:0; margin:0 auto;>
<font style="">Introducing</font><br/>
<h1 class="heading-tag" style="text-decoration:underline; font-size:1.5em;">KOFFEE KORNER BARRIE</h1>
<p align="left">
Koffee Korner is a Canadian company with locations throughout Canada. We carry over 550 flavours of coffee, tea & more including brands like Starbucks, McCafe & Tim Hortons. Visit us online or in our Barrie location at 12 Commerce Part Drive for <b>$10.00</b> off. Offer includes free shipping when your order is over <b>$59.99</b>.
</p>
</div>
</div>

<!-- more HTML content ... -->

</body>
</html>

cssresponsive-designmedia-queriesresponsive

Answer №1

It seems like the reason your rules are being overridden is because you have specified a max-width without setting a min-width. This causes all your rules to stack on top of each other, starting from 0px (since no min-width is declared) up to your max-width.

While this setup may technically work, it's generally a good practice to define ranges of sizes with both min and max values.

You can try setting a min-width for each rule, for example:

@media only screen and (min-width: 1681px) and (max-width: 1920px){
    /*Your Styling Here*/
}

Then,

@media only screen and (min-width: 1601px) and (max-width: 1680px){
    /*Your Styling Here*/
}

Continue this pattern for all your rules for better organization.

Let me know if this solves the issue for you.

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

div with fixed position and scrollable content

I'm exploring ways to create a simple webpage layout inspired by the traditional index setup. The idea is to have a fixed header/navbar div that is 200px in height, with a second div below it containing scrollable content that fills the remaining vert ...

htmlcssscrollable

Shadow box with arrow/bubble element using CSS

I am looking to add a box shadow around the outline of the bubble below. <div class=speech-bubble-dark></div> .speech-bubble-dark { position: absolute; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 0.4em; ...

htmlcss

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular

What is the best way to adjust the CSS height of an HTML select element to 100% within a table cell in Internet Explorer

Is it possible to make a select (dropdown list) element fill out 100% of the table cell height? I was successful in getting it to work in Firefox and Chrome, but unfortunately not in IE (Internet Explorer). Here is the test HTML code: <table> & ...

htmlcssinternet-explorer

Tips for managing multiple events within a single component in Angular 4

Currently, I am working on developing a user interface layer for an application using Angular 4. The page layout I have consists of displaying data in tables based on search criteria. At the moment, I have code that displays the data in one HTML file (rec ...

jqueryangularuser-interfaceresponsive-design

Switching the background image dynamically in Vue.js upon page access

My goal is to update the 'background-image' when the page is accessed. export default { created () { document.getElementsByTagName('html')[0].style.background = "url('../assets/background-blur.png') center" } } //Logi ...

javascriptcssvue.js

Adding a prefix to the imported CSS file

My React app, created with create-react-app, is designed to be integrated as a "widget" within other websites rather than functioning as a standalone application. To achieve this, I provide website owners with minified JS and CSS files that they can inser ...

javascripthtmlcssnode.jsreactjs

Is there a way to shift the display of inline-block to the right?

I'm struggling with positioning a div that's nested within a display:inline-block. How can I align it to the right side of the container? <div style='width:100%'> left <div style='display:inline-block;position:relative;r ...

htmlcss

Utilizing the Strength of Code Snippets and the Art of Style Sheet Separation

When it comes to developing beautiful web pages and forms from scratch, I often struggle as the end result tends to be quite unappealing. Luckily, there are numerous CSS code snippets available that offer stunning solutions. Currently, I am delving into py ...

htmlcssdjangostylesheetcode-snippets

Properly spaced website images

I'm trying to display my images side by side with a slight margin in between them. However, when I apply a `margin-right: 10px;` to each div, the last image doesn't line up properly with my title bar. Is there a way to create spacing between the ...

htmlcssmarginspacing

Tips for creating a Bootstrap table with a "table-bordered" style, fixed header, and scrollable body

How can I keep the table header fixed while allowing the body to scroll without breaking the table layout? I've tried using the CSS below, but it results in the width of the header columns being different from the width of the body columns. Any sugges ...

htmlcsstwitter-bootstrap-3css-tables

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

csscss-grid

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

Utilizing a Bootstrap column design with two columns in place - one column set at a fixed width while the second column stretches across the remaining

Need help with adjusting two columns on a webpage? The right column is fixed at 300px width, while the left column should take up the remaining space. Using flex works well, but when adding a responsive ad to the left column, it extends beyond the availabl ...

cssbootstrap-4

CSS - Retain z-index until the transition is complete

Looking at this basic grid layout: <html> <head> <style> .grid { display: grid; grid-gap: 5px; grid-template-columns: repeat(13, 3fr); } .box { position: relat ...

htmlcss

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs

adjust the div's position based on the window's scrolling bars

Is there a way to make my div move down when the window scrolls down and up when the window scrolls up? How can I achieve this effect? ...

htmlcsspositioning

Reposition the checked box to the top of the list

My goal is to click on each item, and the selected item should move to the top of the list and be rendered at the top. However, I encountered an issue where when clicking on an item, it moves to the top but the item that replaces it also gets checked. Bel ...

javascripthtmlcss

Text aligned vertically within an element using the table-cell display attribute in the Chrome browser

Struggling to align text inside an element styled with display: table-cell? The issue arises when dealing with multiline text in a tab format. Achieving the correct vertical-align: middle; requires displaying it as a table-cell, which works well in most ca ...

cssgoogle-chrome