Stylesheet failing to respond to CSS Media queries

I have looked at other questions with similar issues and it appears that what's missing in their code is:

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

However, I already have this code implemented but still facing problems with the CSS media query not working.

This is how my style sheet looks like:

.calculator__container {
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
    text-align: center;
    margin-left: 40vw;
    margin-right: 40vw;
    margin-top: 25vw;
    padding-top: 40px;
    box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
}

#clear {
    background-color: red;
    color: white;

};

@media only screen and (max-device-width: 500px) {
    .calculator__container {
        border: 1px solid black;
        border-radius: 3px;
        padding: 5px;
        text-align: center;
        margin-left: 10vw;
        margin-right: 10vw;
        margin-top: 25vw;
        padding-top: 40px;
        color: blue;
        box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
    };
    #clear {
        background-color: red;
        color: pink;

    }
}

Any assistance would be greatly appreciated. Can someone please help me?

htmlcss

Answer №1

Instead of using max-device-width, it is recommended to use max-width. The device width is fixed based on the device size and will not change when resizing the browser window on a desktop screen; for instance, at 1920 x 1080 resolution, the max-device-width remains constant at 1920px.

.calculator__container {
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
    text-align: center;
    margin-left: 40vw;
    margin-right: 40vw;
    margin-top: 25vw;
    padding-top: 40px;
    box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
}

#clear {
    background-color: red;
    color: white;
}

@media only screen and (max-width: 500px) {
    .calculator__container {                     
        margin-left: 10vw;
        margin-right: 10vw;      
        color: blue;
    }
    #clear {
        color: pink;
    }
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="calculator__container">
  
  Calculator container.
  
</div>

<div id="clear">
  
  Clear.
  
</div>

.calculator__container {
    border: 1px solid black;
    border-radius: 3px;
    padding: 5px;
    text-align: center;
    width: 20vw;
    margin: 25vh auto 0 auto; /* top, right, bottom, left */
    padding-top: 40px;
    box-shadow: -9px 4px 21px -2px rgba(0,0,0,0.75);
}

#clear {
    background-color: red;
    color: white;
}

@media only screen and (max-width: 500px) {
    .calculator__container {                     
        width: 80vw;     
        color: blue;
    }
    #clear {
        color: pink;
    }
}
<meta name="viewport" content="width=device-width, initial-scale=1">

<div class="calculator__container">
  
  Calculator container.
  
</div>

<div id="clear">
  
  Clear.
  
</div>

Answer №2

Here's what did the trick for me. It seems odd to me because I've completed other projects without using the min-width:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

}

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

Shift div position when clicked and employ jQuery animations

I have been attempting to add animation to a DIV element by using jQuery. The goal is to move the DIV from the center to the left when it is clicked, but I am encountering some issues. The parent div has a position of "relative", and my initial idea was to ...

javascriptjqueryhtmlcss

Content within a Row of a Data Table

Hello! I am just starting to learn JavaScript and jQuery. Can you help me with an issue I am experiencing? Basically, I have a table and I need to identify which tr contains a td with the text "Weekly", "Daily", or "Monthly". Once I locate that specific t ...

javascriptjqueryhtmlcss

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax

What is the best way to create inline-block elements that stretch the entire width of their container?

How can the input field and button behavior be optimized for this specific display: ...

htmlblockcss

In Safari, the scrollbar appears on top of any overlays, popups, and modals

On my webpage, I have a div with the CSS property overflow-y: scroll. The page also features several popup modals and overlays. Strangely, the scrollbar of the div appears on top of these overlays instead of behind them. I attempted to resolve this issue b ...

javascripthtmlcsssafariscrollbar

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

javascripthtmljquery

Problem with the show/hide feature on jQuery. Automatically scrolls to the beginning of the page

On my website, I have successfully implemented two basic Show / Hide links that are working great. Here is the HTML code: <!DOCTYPE html> <html lang="en"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" conte ...

javascriptjqueryhtmlhideshow

The functionality of displaying and hiding elements in HTML using jQuery is not functioning as expected

When I implemented the .toggle() functionality in jQuery on the content, I encountered a problem where clicking on the "read more" button caused the text link to disappear and the first paragraph to become invisible. Below is the jQuery code snippet: $( ...

jqueryhtml

how to handle form submission using JavaScript's return method

As a developer, I have created a single page that fetches data from a registration page. On this page, each data row has an "add" and "unfriend" button, with the latter initially disabled. When a user clicks the "add" button, a prompt box appears asking ...

javascriptphphtmlforms

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? ...

cssreactjsmaterial-ui

Centralized Title / Side-aligned Menu

Good day, I am in need of assistance with a menu layout for my website. My goal is to have the title centered with the menu flexed out to the sides, but I'm encountering some issues. The colors included are just for testing purposes and will be update ...

cssmenuflexboxtitle

The whitespace issue stems from the div element __next-build-watcher generated by next js and usecontext

There's a notification bar at the bottom of my page that lets the user know when their email has been sent. This bar is generated using useContext in React/Next.js. To see the code, check out this Codebox link: Code However, I've noticed there ...

javascripthtmlcssnext.js

CSS - using numbers to create dynamic background images

I am looking to create a design where the background images in CSS display increasing numbers per article, like this example: This idea is similar to another post on Stack Overflow discussing using text as background images for CSS. You can find it here: ...

javascriptjqueryhtmlcss

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

Conceal the div containing all its content within

I need to hide a div with all the content inside it using this code: <form action="" method="POST" name="form"> <p for="name">text :</p><input type="text" name="name" value="<?php echo $name_g; ?>" onfocus="ClearPlaceHolder (thi ...

javascriptjqueryhtmlcss

Tips for fixing the position without affecting the width

I'm trying to figure out how to keep my #header fixed in position without it expanding in width. Despite checking my code multiple times, I can't seem to identify the factor causing my header to become wider and shift downwards unexpectedly. I in ...

htmlcss

The width property in Bootstrap is not functioning properly in .NET Core 6

I've exhausted all my options, including documentation and the last 10 stack overflow answers, but nothing seems to be working. I even tried using: <meta name="viewport" content="width=device-width, initial-scale=1"> I attem ...

htmlcssasp.net.netmodel-view-controller

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

jquerycsstwitter-bootstrapscrollbardatatables

Effortlessly implement CSS styling in a scoped shadow element with Vue3

I am facing an issue with applying styles to an anchor element in my code. Below is a snippet of the code: <template> <custom-button> #shadow-root (open) <a href="#"></a> <other-custom></other-c ...

cssvue.jsvuejs3shadow-domscoped