What is the reason for the second media query not being applied?

Here is the code snippet:

@media screen and (max-device-width: 2000px)
{
    body
    {
        margin:0px;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-device-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}

The issue I am facing is that the black background and paddings are always applied, the second query seems to be ineffective. Why could this be happening?

cssuser-interfaceresponsive-designmedia-queries

Answer №1

Here is the solution you need:

@media screen and (max-width: 2000px)
{
    body
    {
        margin:0;
        padding:0;
        background-color: #000;
        color: white;
        font-size: 30px;
    }
    #offer
    {
        padding-right:250px;
        padding-left:250px;
    }
} 
@media screen and (max-width: 1000px)
{
    body
    {
        background-color: #fff;
    }
    #offer
    {
        padding-left: 10px;
        padding-right: 10px;
    }
}

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

What is the best way to resize an element such as an image?

When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...

javascriptjqueryhtmlcsssass

Tips for creating blurred background images with CSS

I am experiencing an issue where the background image is being blurred along with the content. Despite trying to adjust the z-index, it seems like it's not working as expected. Below is the HTML code, and I would appreciate a solution with an explanat ...

htmlcss

Inspecting the options within a dropdown menu to adjust a styling attribute

I am in the process of developing a website that features multiple select options for creating sentences. My goal is to detect when users are changing these options to form specific sentences, such as changing "I", "Am", "Blue" to reflect the color blue. T ...

javascripthtmljquerycssdetection

Passing a variable to the render method in a PDF document

I'm currently working on a project with Django where I need to convert an HTML monthly report into a PDF. The data for the report is retrieved from a database based on the selected month. I am facing an issue in sending the selected month from the HTM ...

htmlcssdjangoclasspdf

I have difficulty getting divs to float the way I want them to

I have a total of 5 divs inside one main div, and I want to arrange them so that 2 are floating on the left and the remaining 3 are floating on the right: .container { height: 400px; border: 1px solid black; } .first, .second, .third, .fourth, .fift ...

htmlcsscss-float

Struggling with Text Wrapping in HTML and CSS

Hello, I am completely new to the world of HTML and CSS and I am currently working on creating a small website for a project. Unfortunately, I have hit a roadblock when it comes to text wrapping. The problem arises when the length of the window is smaller ...

htmlcsstextword-wrap

Tips for Incorporating HTML Code into an ASP Button's Text Attribute

How can I add a symbol to a button's text without it showing as blank? The symbol in question is an arrow, which you can find here. <asp:button id="btnAdd" runat="server" class="next"/> CSS: .next { content = &#10095; width:50px; } ...

htmlcss

Transform the CSS animation to include a sliding down motion combined with a blur effect

Can the CSS transition be changed to allow for a sliding down effect with a blur effect? I am looking to change this CSS animation effect to match the gif image shown below. Is it achievable using JavaScript, CSS, or a combination of both? Any help in solv ...

javascripthtmljquerycssanimation

Achieving a clean and organized primary menu layout on Scholarly Lite through Drupal theming to display all links in a single row

I currently utilize: A live demonstration can be accessed at the following link: Within the primary menu, I have numerous links such as: Home Special features Typography Search form Is there a way to arrange all of these primary links in a sin ...

cssdrupaldrupal-7themesdrupal-theming

Tips for locating the correct files for editing the CSS code in a custom WordPress theme

I am facing an issue with my custom-made WordPress theme-based website. Despite my attempts to adjust the image dimensions in the blog section using the WordPress dashboard, they remain unchanged. The problem seems to be stemming from a max-width setting i ...

phphtmlcsswordpress

The Dropdownlist menu from Metro UI CSS does not function properly when placed in an ASP page within a subfolder

I'm currently facing an issue with my asp.net application in C# that utilizes Metro UI CSS for the Dropdownlist menu. The problem arises when the Dropdownlist menu works properly on pages within the same folder as the master page, but fails to functio ...

jqueryhtmlcssasp.net

Conflicting styles between Bootstrap and Formstack are causing radio buttons to appear only partially visible

Encountering a conflict between Bootstrap (4.1.3) and Formstack CSS when trying to embed a form in a website. The radio buttons are not fully visible, with the issue located in the "label" class ("fsOptionLabel"). Adjusting the line height provides a parti ...

cssbootstrap-4formstack

Generating symbols that combine both images and text seamlessly

I am working with a circle image that I need to resize based on its placement. This image is intended to be a background for a character or two of text. Specifically, whenever the number 1 or 2 appears in a certain element, I want the circle to appear beh ...

javascripthtmlcssimage

What is the best way to prevent a function from running unnecessarily multiple times?

Whenever I click "About Me" multiple times, the jQuery animation stops as expected. However, if I click "My Portfolio", "Web", "Graphic", and "Others" more than once, the #box1 div keeps moving down endlessly. This might not be noticeable at first, but onc ...

javascriptjqueryhtmlcssweb

The lovely border image vanished mysteriously from Safari on both OS and iOS

My border image is no longer appearing in Safari on OS and iOS. I am using Safari 10 on my Mac and the latest version of iOS on my iPad and iPhone. However, it still displays correctly in Firefox. You can view the website URL here: #sidebar .inner{ bor ...

ioscsssafariborder-image

Restore background color when clicked outside

I'm currently using this code to both load content from a div and change the color of the tab when a user clicks on it. However, I'm struggling to find a way to revert the background color back once the user clicks on something else. Any suggesti ...

jquerycsstabsbackground-color

Place the bottom element of the top parent element in position

Creating a simple tooltip with bottom positioning at the top of the parent element involves setting a negative height for the tooltip element. However, when checking the height of the tooltip element upon hovering, it returns 0 according to console.log(). ...

javascriptjquerycsstooltip

:root variables not being recognized in SCSS and Vue3 with Vite

I am encountering an issue with setting variables in my root SCSS file, as they are not being recognized correctly. Within my Vite configuration, I have included the following to import my styling: css: { preprocessorOptions: { scss: { additio ...

cssvue.jssassvuejs3vite

The input focus placeholder at the top is not functioning properly when applied to an input field that

I recently designed an input box similar to this: https://i.stack.imgur.com/lkSnh.png However, I encountered an issue when trying to make the input box readonly. Here is a snippet of my code: .myinput input:focus { outline: none; } ... <div clas ...

htmlcssfocuscss-transitions

Tips for aligning a text box field in the center using Bootstrap

I'm having trouble centering a text field on my screen. No matter what I try, it stays aligned to the left. How can I fix this and get it centered? <div class="form-row"> <div class="col-md-4 col-md-offset-4"> ...

htmlcssbootstrap-4