What could be causing the media queries to not take effect at a max-width of 425px?

When I try to apply media queries for max-width 768px and max-width 425px, I noticed that the styles intended for max-width 768px are also being applied when the width is 425px. This results in the 

al-articles-tags-chip-list-container
having a width of 600px on a device with a width of 425px, which is unexpected.

However, the media queries work as expected for width 768px.

.al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
<div class="al-articles-tags-chip-list-container">
  <div class="al-text-before-search">
    <span>I WOULD LIKE TO SEE</span>
  </div>
  <div class="al-search-input-container">
    <mat-form-field class="al-articles-tags-chip-list">
      ....
    </mat-form-field>
  </div>
</div>
cssangularlessmedia-queries

Answer №1

You must include the meta tag viewport in the head section.

I tested your code and it was successful.

Update: I also attempted to test your code in Angular, and it worked fine. Make sure to check for any conflicting @media queries in your styles.css file.

https://stackblitz.com/edit/angular-check-mediaquery

https://i.sstatic.net/T9DZ8.png

https://i.sstatic.net/qAmsI.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .al-articles-tags-chip-list {
  width: 100%;
}

.al-text-before-search {
  font-size: 36px;
  margin-right: 22px;
}

.al-search-input-container {
  flex: 2;
}

.al-articles-tags-chip-list-container {
  margin: 0 auto;
  padding-top: 150px;
  width: 1000px;
  display: flex;
}


@media only screen and (max-width: 1024px) {
  .al-articles-tags-chip-list-container {
    width: 700px;
  }
}

@media only screen and (max-width: 768px) {
  .al-articles-tags-chip-list-container {
    width: 600px;
  }

  .al-text-before-search {
    font-size: 26px;
  }
}

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}
    </style>
</head>
<body>
    <div class="al-articles-tags-chip-list-container">
        <div class="al-text-before-search">
          <span>I WOULD LIKE TO SEE</span>
        </div>
        <div class="al-search-input-container">
          <mat-form-field class="al-articles-tags-chip-list">
            ....
          </mat-form-field>
        </div>
      </div>
</body>
</html>

Answer №2

In order to address this issue, my previous solution involved creating a new css file where the @media query code was placed with a width value of 425px.

For example:

Style3.css    /* Name of the newly created file */

Next, include the following code:

@media only screen and (max-width: 425px) {
  .al-articles-tags-chip-list-container {
    display: block;
    width: 300px;
    padding-top: 115px;
  }

  .al-text-before-search {
    font-size: 26px;
  }

  .al-search-input-container {
    flex: unset;
  }
}

If you implement this solution, please let me know if it resolves your issue. Thank you.

Answer №3

After some troubleshooting, I discovered the solution to this issue. It turns out that my laptop's display settings were set to a scale of 125% instead of the standard 100%. I appreciate the assistance provided!

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 shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

javascriptphphtmlcss

Unable to send messages despite successful connection through Sockets.io

My Java Server is set up to listen for messages from an Ionic 2 Client using Sockets.io. The server can successfully send messages to the client, but I am facing issues with getting the client to send messages back to the server. For example, when the jav ...

javascriptjavasocketsangularionic2

Animate the jQuery: Move the image up and down inside a smaller height container with hidden overflow

Check out the fiddle to see the animation in action! The image is programmed to ascend until its bottom aligns with the bottom of the div, and then descend until its top aligns with the top edge of its parent div, revealing the image in the process. ...

javascriptjqueryhtmlcss

Ways to customize the appearance of a search box

I am looking to revamp the appearance of a search bar that currently looks like this: <div class="searchbase input-group animated trans" id="searchbase"> <input type="text" placeholder="<?php _e(_l('Searching...'));?>" class=" ...

phpcsssearch

Ways to center text within a nested div in a parent div with table-cell styling

The issue I am facing involves a parent div with the CSS property display: table;. Nested inside is a child div with display: table-cell;. Despite applying text-align: center;, the text within the second div does not align to the center as expected. Here ...

htmlcssangularjs

Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text. My objective is to have both elements inline with each other, while allowing the fieldset to adj ...

htmlcsssvginline

Is there a way to temporarily toggle classes with jQuery?

Incorporating ZeroClipboard, I have implemented the following code to alter the text and class of my 'copy to clipboard button' by modifying the innerHTML. Upon clicking, this triggers a smooth class transition animation. client.on( "complete", ...

javascriptjquerycsszeroclipboard

Uh-oh! A circular dependency has been detected in the Dependency Injection for UserService. Let's untangle this web and fix the issue!

Encountering the following error: "ERROR Error: Uncaught (in promise): Error: NG0200: Circular dependency in DI detected for UserService." The auth.component.ts utilizes the UserService and User classes, while the user.service.ts only uses the User class. ...

angulartypescriptdependenciescircular-dependency

Unfortunately, ng2-datepicker does not currently have support for Angular 4

I am in the process of upgrading from Angular version 2.4.0 to Angular 4, and encountered some peer dependency errors along the way: Attempting to install the latest datepicker component: npm install ng2-datepicker –save Resulted in the following erro ...

angulardatepickerangular2-forms

Learn how to create a visually stunning CSS menu by centering a background image from the website cssmenumaker

I found a ready-made dropdown menu on . The menu is working well, but I would like to center the buttons. Is there a way to do this? Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Open+Sans:600); /* Menu CSS */#cssmenu, #cssmenu ...

cssdrop-down-menucenteringready

Issue with Slick Slider when expanding collapsible section in Bootstrap 4

Whenever I expand a bootstrap collapse that contains a carousel, only one carousel item appears instead of all. Is this a bug in Bootstrap or Slick Slider? https://i.sstatic.net/T7Orm.jpg Slider $('.remember__carousel').slick({ slidesToShow: ...

csstwitter-bootstrapslick.js

The dynamic design of the webpage allows for a fluid layout, where the navigation bar smoothly adjusts its position when

I anticipate receiving criticism from certain users for not conducting enough research. However, I have dedicated two days to this issue and the lack of guidance is starting to frustrate me. Therefore, I offer my apologies if this question has already been ...

csshtml

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

htmlcssmodx

The collapsing menu is malfunctioning due to duplicate selectors

Although I have been learning HTML, CSS and jQuery, one area that always trips me up is selectors. Currently struggling with redundant selectors. I am attempting to customize the ul and li elements after collapsing the li, however, the selector doesn&apos ...

css

Why is the ionChange/ngModelChange function being triggered from an ion-checkbox even though I did not specifically call it?

I have an issue with my code involving the ion-datetime and ion-check-box. I want it so that when a date is selected, the checkbox should automatically be set to false. Similarly, if the checkbox is clicked, the ion-datetime value should be cleared. Link ...

javascriptangulartypescriptionic-framework

What is the best way to send JSON data to Sass in ReactJS?

In my current project, I am developing a React/Redux application with Webpack that showcases UI components and enables users to adjust the colors of those components. The styling is being done using CSS Modules with scss. My preference is to keep all the s ...

cssjsonreactjssasswebpack

What is the best way to define multiple variables in ionic 2 using Angular2 and TypeScript?

I'm brand new to working with ionic2/Angular2/Typescript. My project involves creating a wheel with eight slices, but I'm struggling with how to declare multiple variables. In JavaScript, I've declared them like this: function rand(min, max ...

javascriptangulartypescriptionic2

Utilizing PrimeNG radio buttons for selecting multiple items simultaneously

While dynamically creating multiple radio buttons using *ngFor, I am facing an issue where I can select multiple items from the UI. Below is my code snippet: <div class="p-col-12"> <p>Question Type</p> <div *ngFor ...

angularradio-buttonprimeng

Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below: In order to achieve this, three divs were created: <div class="row"> <div class="col-md-3">Text</div> & ...

htmlcsstwitter-bootstrap-3

Efficiently loading Angular Material components in feature modules

Currently, my Angular module named MyAngularModule looks like this: /app/material/material.module.ts import { MatButtonModule, MatIconModule } from '@angular/material'; const MaterialComponents = [ MatButtonModule, MatIconModule, ... ]; @ ...

angulararchitecturelazy-loadingangular-material2angular-module