The grid layout does not automatically stack columns when resizing the browser window with a media query

My Grid is not behaving as expected when resizing below 500px using a media query. I want the columns to stack and center after the resize to make it more mobile-friendly. The current media query successfully changes the background to teal, but the grid does not adjust as desired.

body {
  margin: 0;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

a:link {
  text-decoration: none;
}

.section-3 {
  background-color: #f1f1f1;
  padding-top: .7em;
  padding-bottom: 2em;
  min-height: 50vh;
  margin: 0 auto;
  border-top: 2px solid teal;
  max-width: 100%;
}

.section-3-body {
  text-align: center;
  max-width: 100%;
}

.section-3 .title .meet {
  color: teal;
  border-top: 2px solid teal;
  border-bottom: 2px solid teal;
  border-radius: 4px;
  padding: .7em;
  display: inline-block;
}

.section-3 .grid-container {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  max-width: 100%;
  overflow: hidden;
}

.grid-container>div {
  border: 2px solid #123;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
}

.grid-container h1 {
  size: 12px
}

h3+h3 {
  margin: 0;
}

h1+h3 {
  margin: 0;
}

.section-3 .footer {
  margin-top: 30px;
}

.section-3 .footer .learn-more {
  color: teal;
  padding: .7em;
  border-radius: 14px;
  border: 2px solid teal;
  font-size: 20px;
  font-weight: bold;
}

.section-3 .footer .learn-more:hover {
  background-color: teal;
  color: white;
}

@media screen and (max-width:500px) {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 1rem;
    background-color: teal;
  }
}
<section class="section-3">
  <div class="section-3-body">
    <div class="title">
      <h1 class="meet">Testing the Testing</h1>
    </div>
    <div class="grid-container">
      <div class="grid-left column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
      <div class="grid-center column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
      <div class="grid-right column">
        <img src="https://unsplash.it/400">
        <h1 class="name">Testing Names Name</h1>
        <h3 class="testing-2">Testing 2</h3>
        <h3 class="testing-3">Testing 3</h3>
        <h3 class="testing-4">Testing 4</h3>
      </div>
    </div>
    <div class="footer">
      <a href="#learn" class="learn-more">Test the button</a>
    </div>
  </div>
</section>

htmlcssmedia-queriescss-grid

Answer №1

The issue lies with specificity.

When looking at your code for large screens, the container is styled as follows:

.section-3 .grid-container {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 15px;
  max-width: 100%;
  overflow: hidden;
}

However, the media query for smaller screens contains different styling:

.grid-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;
  background-color: teal;
}

The use of .section-3 .grid-container results in higher specificity compared to .grid-container, causing the media query's grid-template-columns property to not apply properly.

Despite this, the teal background color from the media query is still applied since it doesn't exist in the other rule.

To resolve this, utilize the same selector (.section-3 .grid-container) in the media query, ensuring matched specificity. As this rule appears later in the code, it will take precedence when activated.

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

For a demonstration, check out this jsFiddle demo.

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

Customize Text Area's Font Based on Selected Option in Dropdown List

I'm currently working on an HTML file that includes a dropdown list and a text area. Here's the code snippet: <select id='ddlViewBy' name='ddlViewBy' onchange='applyfonttotextarea()'> <option value = ' ...

javascripthtml

Changing the size of a dynamic watermark png in php

I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...

phphtmlgd

Create a sleek 2-column design featuring a bonus scroll bar exclusively using CSS styling

In my current project, I have a unique challenge. I am working with a list of flattened div elements and unfortunately, I am unable to edit the HTML markup to add any structures. The first div in the list is quite long, and I would like to place it in a se ...

htmlcss

ReactStrap: Transparency issue with DropDown items on mobile devices

I've encountered an issue with my dropdown menu that works perfectly on desktop: https://i.sstatic.net/73Z0X.png However, on mobile devices, it appears to be transparent for some reason: https://i.sstatic.net/dhtOw.png Here is the code snippet ...

htmlcssreactjsbootstrap-4reactstrap

What is the best way to create an interactive menu icon that includes dropdown options using MUI menu features?

i am looking to create a component similar to this https://i.sstatic.net/fwIB0.png currently, I am utilizing a material UI pop menu in my project below is the JSX code snippet <div className="navMenu" style={{ position: "relative" ...

cssreactjsmaterial-uipopup

Sending user input from a Laravel modal form to a controller as a parameter

I have a button that triggers a modal form where the user can update their group name. I'm trying to pass the ID into the form using {!! Form::open(['action' => [ 'ContactsController@update', id]]) !!}. I attempted to do this si ...

phphtmljquerylaravelforms

In a jQuery application, the action of adding text from an input field to a div is triggered by clicking a

It's possible this is a duplicate question, but none of the answers I found solved my issue. I'm attempting to create a jQuery script where text entered into a text box is appended to a div when a button is clicked. This is part of a game I' ...

javascriptjqueryhtmlcss

Having difficulties with JavaScript's if statements

I'm facing an issue with my JavaScript code that is meant to modify the value of a price variable and then display the updated price. The problem arises when I have multiple select options, as the price only reflects the ID of the last statement. Here ...

javascripthtmlif-statement

Obtain the contenteditable span's value

I'm facing an issue with a content editable span - I want to extract its value when the post button is clicked, but it's not working as expected. Please note that I am unable to convert the span to a textbox or div, I specifically need the value ...

javascriptjqueryhtmlcontenteditable

Java Applet for capturing specific sections of a webpage to create a screenshot

Does anyone know of a way (applet or something else) to capture a screenshot of the content within a specific div on a webpage? I came across this Java code for capturing a screenshot of the entire screen: import java.awt.AWTException; import java.awt.Re ...

javajqueryhtmlwebapplet

Begin the ul element from the left-hand side

Check out my latest JSFiddle creation: http://jsfiddle.net/alonshmiel/Ht6Ym/2409/ I'm attempting to align the ul element on the left side of the page: I've experimented with the following CSS rules: margin-left:0px; float: left; Unfortunatel ...

htmlcss

What is the reason for having the navigation bar stretch across the entire width of the mobile device?

NEW QUESTION: How Can I Fix the Navigation Bar Issue on Mobile Devices? I apologize for any language issues as I am using a translator. Hello, I have encountered an issue with a website form containing a price list. When viewed on a mobile device, all the ...

javascripthtmlcsstwitter-bootstrapinterface

How can I modify the font size of h1 and h2 elements in CSS?

I am currently working with a WordPress twenty eleven theme and I am trying to adjust the size of my headings. Specifically, when I enclose my headings in h1 and h2 tags like so: <h1>My h1 heading </h1> <h2> My h2 heading </h2> The ...

csswordpresshtml-heading

Tips for incorporating a JavaScript script into local HTML code

I am facing an issue with my code on jsfiddle. It works perfectly there, but when I try to run it locally, it doesn't seem to work. I have checked the code multiple times and even downloaded the jQuery file to link it, but still no luck. I feel like i ...

javascriptphpjqueryhtml

Opening the Instagram app in Instagram's built-in browser

<a href="instagram://user?username=someuser">Open Instagram</a> Works fine on Google Chrome on my Android phone. However, it does not work from Instagram's in-app browser. I keep getting a 'Page can't be loaded' error messa ...

phphtmlinstagraminappbrowser

Increase the CSS integer by a set value at regular intervals with the help of JavaScript

I am looking to create a simulated loading icon that gives the illusion of loading for some calculations, but in reality, it loads quickly. My plan is to increment the animation every second until it appears "complete". I am using CSS3 animations, with a h ...

javascriptjqueryhtmlcss

The text outside of the button is overridden by my CSS styling

I've been working on a simple card matching game and I decided to style the buttons to enhance their appearance. However, I'm facing an issue where the styling code has caused the text to appear outside of the button. Whenever I try to adjust the ...

htmlcssbuttontext

Switch up the Background using .css and jCarousel

I am attempting to create a dynamic gallery using jCarousel and Ajax. The thumbnails are being loaded from a '.txt' file. I am trying to achieve the following effect: When a thumbnail is clicked, the background of the body changes. This action sh ...

cssajaxdynamicbackgroundjcarousel

Adding a border to dynamically generated content while excluding the outer borders using CSS - an easy guide

My current project involves establishing a grid system that dynamically populates content, resulting in an uncertain number of elements being created. At the moment, each element is placed within a flexbox container with 3 elements per row. If there are mo ...

javascriptjqueryhtmlcsssass

What is causing my animation to jump when using the Web Animation API reverse() function?

I've come across various sources stating that when you call reverse() while an animation is playing, it should have the same effect as setting playbackRate to -1. However, in my case, using reverse() makes my animation behave erratically and jump arou ...

javascriptcssweb-animations