What could be causing my media query to not function properly?

I've been experimenting with some basic media queries but am encountering an issue with the div element that has the class "container." Whenever I adjust the screen size to be between 992px and 1200px, the div disappears from the page. It's perplexing because it works perfectly at all other sizes. What could I be overlooking here?

Am I missing a simple solution?

@media screen and (max-width: 768px) {
    .container {
        width:100%;
        border:solid 1px black;
        height:300px;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .container {
        width:100%;
        border:solid 1px red;
        height:300px;
    }
}

@media screen and (max-width: 1200) and (min-width: 992px) {
    .container {
        margin:auto;
        width: 800px;
        border:solid 1px green;
        height:300px;
     }
}

@media screen and (min-width: 1200px) {
    .container {
        margin:auto;
        width: 1000px;
        border:solid 1px blue;
        height:300px;
     }
}

Answer №1

Check out this responsive design solution:

@media screen and (max-width: 768px) {
    .container {
        width:100%;
        border:solid 1px black;
        height:300px;
    }
}

@media screen and (max-width: 992px) and (min-width: 768px) {
    .container {
        width:100%;
        border:solid 1px red;
        height:300px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 992px) {
    .container {
        margin:auto;
        width:800px;
        border:solid 1px green;
        height:300px;
    }
}

@media screen and (min-width: 1200px) {
    .container {
        margin:auto;
        width: 1000px;
        border:solid 1px blue;
        height:300px;
     }
}

Answer №2

There are just 2 simple mistakes in your code. Firstly, you forgot to include the units at the 3 media-query. Secondly, I suggest increasing the min-width by 1 pixel everywhere so that only one media-query is applied for screens with exact sizes.

For example:

@media screen and (max-width: 768px) {
    .container {
        width:100%;
        border:solid 1px black;
        height:300px;
    }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
    .container {
        width:100%;
        border:solid 1px red;
        height:300px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 993px) {
    .container {
        margin:auto;
        width: 800px;
        border:solid 1px green;
        height:300px;
     }
}

@media screen and (min-width: 1201px) {
    .container {
        margin:auto;
        width: 1000px;
        border:solid 1px blue;
        height:300px;
     }
}

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

Placing an image above text in a table cell and making it hover

Is there a way to display an icon on the right-hand side of a table cell using jQuery? I want it to overlap the td contents if necessary. I've searched for solutions online but haven't found anything helpful yet. My main concern is styling rathe ...

Class name that changes the cursor to a pointer shape in CSS

My question is: Are there any CSS classes or attributes in Bootstrap 4 specifically designed for applying the pointer: cursor property to buttons or links? <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel= ...

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...

Continue extending the footer as the screen size decreases

Could anyone offer some assistance? I'm currently working on a project and facing issues with getting the footer to always be pushed down as the screen size decreases. As of now, my content is going under the footer instead. Any help would be greatly ...

What steps can I take to ensure that it is responsive?

I recently purchased this template and am currently editing it. It utilizes bootstrap, however, I seem to be encountering an issue with the sizing of an image on different monitors. I attempted to add: .responsive {width: auto; height: auto;} to resolve ...

Scroll down 1 page using Javascript and Jquery

Hey there! I'm looking to create a website where a small scroll on the mouse wheel will take the site to the next anchor. It's kind of hard to explain, but one good example is the Tesla Model 3 website on the US site here. Does anyone have any t ...

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

Ways to incorporate a reverse transition effect

I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movem ...

Expanding the blank area on the right margin of the page

Recently, I took a responsive website template and converted it into an ASP.NET MVC app. However, I've encountered some peculiar behavior when resizing the browser window. As the width of the window decreases below 986 pixels, a mysterious white "spac ...

The presence of CSS rollovers on a scrollable div is causing overflow problems

Currently, I am developing an interface that involves a list of items inside a scrollable div. Some of these items have rollover menus that extend beyond the boundaries of the div when hovered over. It is crucial for the website to be compatible with disab ...

Is there a way for me to have an image smoothly ascend as the caption rises?

I have put together the following html snippet: http://jsfiddle.net/4gDMK/ Everything is working smoothly, but I am struggling to figure out how to simultaneously move both the captions and the image upwards so that the entire image is no longer visible. ...

An issue with the font display

I'm having trouble with a specific font on my webpage and jsfiddle, even though it works fine on w3schools website. Here's an example on jsfiddle HTML <div> With CSS3, websites can finally use fonts other than the pre-selected "web-safe" ...

Determine the position of an element in relation to a specific ancestor using JavaScript

Let's consider the following example of HTML code: <div id="site_header_container" class="site_bar_container"> <div id="site_header"> <div id="header_logo_container"> <a class="sliced" id="header_ ...

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

Position divs to align text beside icons

I am currently working on a Bootstrap popover to display various pieces of information, each containing an icon and some text. Additionally, I am incorporating twig into this project. Here is the HTML structure: <span class="fa fa-user instructor-con ...

Adjusting Media Queries according to the browser window's zoom level

Is there a way to detect the browser width dynamically? For instance, can I adjust the CSS styling based on zoom adjustments like ctrl + or ctrl -? By "box," I am referring to a perfectly square shape. So, when the browser width is 100%, I want a layout wi ...

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

The content in the html document is not flowing outside a div unless I eliminate the floating property from the div(s)

My goal is to create a page layout with three sections, each floated left based on the device width using media queries in my CSS. I have successfully achieved this, but when I inspect the page using Chrome Developer Tools, I notice that the body is not sp ...

What is the best way to position a div in the top right corner of my form using Bootstrap?

I have a form displaying some detailed text about elements in my application. Located outside this form is an "add new item" button that redirects the user to a new page for adding a new item. The current placement of this button is on the upper left corn ...

creating a personalized CSS style rule

Can a custom rule be created in CSS using @media for a parent class to make changes based on the class? <div class="parentGreen"> <ul class="ul1"> <li>1</li> <li>2</li> &l ...