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

AngularJS - Unchecked radio button issue

Within my code, there is an ng-repeat including several radio buttons: <div class="panel panel-default" ng-repeat="item in vm.itemList"> ... <td ng-show="item.edit"> <div class="row"> ...

javascripthtmlangularjsradio-button

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage

Tips on how to connect with ngFor

I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a know ...

htmlangularevents

Easy fix for 3 circles (images) placed in a row with equal distance between them and perfectly aligned

I've been spending the last 3 days trying to accomplish this specific task: 3 circular images arranged horizontally with equal spacing Occupying 70% of the central screen area Height and width based on percentages for browser resizing adjustment It ...

htmlcssflexbox

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

What methods can I use to prevent floated child divs from wrapping?

I'm currently working on creating a carousel-like feature where users can select radio buttons within various div elements. The concept involves having approximately 20 divs, each 150px wide, containing radio buttons. I want to prevent these 20 divs f ...

htmlcsscss-floatz-index

The background color in CSS remains stagnant, refusing to change despite

Can someone help me figure out why the background color isn't changing in my simple code? I've double-checked that the external CSS is properly linked because the text color of h1 is changing. <!DOCTYPE html> <html> < ...

css

Is it possible to align a clip-path starting from the right edge?

On my webpage, I have a unique hamburger icon that is positioned 2rem away from the right and top edges. I am looking for a convenient way to create a clip path that grows from its center point. Calculating the center point is not difficult but unfortunate ...

cssclip-path

The checkbox appears unchecked, yet the content normally associated with a checked checkbox is still visible

As the title suggests, I am encountering an issue with my code. Here is the snippet: $('#somediv').change(function() { if(this.checked) { $('.leaflet-marker-pane').show(1); } else { $('.leaflet-marker-p ...

jqueryhtmlcheckbox

What is the best way to ensure a "child" div does not overflow on its own and instead utilizes the padding of its parent div for rendering?

Initially, here are my code snippets: In the HTML file: <div class="div parent"> Title <div class="div child"> <div class="overflowed"> </div> </div> </div> CSS Styling: .div { border: 1px solid #0000 ...

htmlcss

What is the best way to align a button within a Jumbotron?

Struggling to find the right CSS placement for a button within a jumbotron. I attempted using classes like text-left or pull-left, but nothing seemed to work as I hoped. I believe a simple CSS solution exists, but it's eluding me at the moment. Ideall ...

htmlcsstwitter-bootstrap

Retrieve data from the controller of the selected element on the subsequent page using AngularJS

Currently, I am in the process of developing an ecommerce platform using angularjs. In my controller, I have a list of various products structured like this: $scope.products = [ {imgLink: 'product1.jpg', name: 'Wingtip Cognac Oxford&apo ...

javascriptjqueryhtmlangularjs

Unable to produce scrolling animation using JavaScript

I'm trying to implement a feature on my website where the page scrolls with a sliding effect when the user presses the "Scroll" button. However, I've encountered issues as it doesn't seem to work despite adding the necessary tags to my HTML ...

javascripthtmlcss

The positioning of absolute CSS elements is causing alignment issues with their adjacent siblings

I am currently developing a customized Tooltip component using React that can be rendered to the right or below the target element. In my approach, the Tooltip component takes children as input and displays them. When these children are hovered over, the t ...

cssreactjssassflexboxcss-position

Transform a text node into an HTML element with the help of JQuery

Consider this HTML snippet: <div> Lorem ipsum <span>dolor sit</span> amet <span>consectetur adipiscing elit</span> eiusmod tempor </div> To select the text nodes [Lorem ipsum, amet, eiusmod tempor], ...

javascriptjqueryhtml

unable to see the new component in the display

Within my app component class, I am attempting to integrate a new component. I have added the selector of this new component to the main class template. `import {CountryCapitalComponent} from "./app.country"; @Component({ selector: 'app-roo ...

htmlangulartypescript

Mobile view causes malfunction in Bootstrap Toggle Burger Menu functionality

<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;"> <a class="navbar-brand" href="#">FoodFusion</a> <button class=&quo ...

phphtmlcssmenu

Creating consistent image sizes in Bootstrap

I'm currently using Bootstrap 4 to showcase multiple images on my website. I have attempted to apply the Grid system as per Bootstrap's guidelines, but the display of the images is not aesthetically pleasing due to their uneven sizes, which can b ...

htmlcssfrontendbootstrap-4

How to retrieve the optgroup label from a Bootstrap Select dropdown

Currently, I am working with a BootStrap select box and my goal is to identify the optgroup of the option that has been selected. The following code snippet showcases a bootstrap select box with different options: <li rel="1"> <div class="div- ...

jqueryhtml