What are the steps to make CSS grid stack on mobile devices?

In my CSS grid, I have set the grid template columns to 

grid-template-columns: repeat(auto-fit, minmax(225px, 1fr))

However, when I test the site's responsiveness on mobile, the grid elements do not stack but just get smaller. I am trying to make them stack into a single 1fr column on mobile devices. I attempted using a media query to change the grid template columns to 1fr at a specific break-point, but it did not work.

To see what I currently have, you can check out this CodePen link: https://codepen.io/Swildman/pen/ZEzqvXK

htmlcsscss-grid

Answer №1

One of the main issues was within your media query - you failed to specify a specific element for the property application.

Below is the crucial part of the CSS modifications I made:

@media screen and (max-width: 768px) {
  .services-container {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
   }

  .cell-1, .cell-2, .cell-3, .cell-4, .cell-5, .cell-6 {
    grid-column: auto;
    grid-row: auto;
  }
}

In addition, I reset all instances of your .cell to have their placement set to auto.

/* color variables */

:root {
  --highlight-color: #ff7264;
  --white-color: #fff;
  --text-color: #7f7f7f;
  --dark-bg-color: #2e2e2e;
  --light-bg-color: #fff;
  --gray-bg-color: #666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* services section styles */

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: repeat(3, 200px);
  grid-gap: 5px;
  margin: 5px;
}

.cell {
  background: var(--highlight-color);
  text-align: center;
  color: var(--white-color);
  padding-top: 10px;
}

.cell h3 {
  font-size: 20px;
}

.cell p {
  line-height: 1.4em;
}

/* Additional styling rules omitted for brevity */

<section id="services-section">
  <h2 class="services-title">Services</h2>
  <div class="services-container">
    <div class="cell cell-1">
      <h3>Creative Web Design Services</h3>
      <p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
        Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
    </div>
    <div class="cell cell-2">
      <h3>Digital Marketing</h3>
      <p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
    </div>

    /* Remaining HTML markup omitted for clarity */

  </div>
</section>

You can find the updated CodePen link here: https://codepen.io/chrislafrombois/pen/xxKyYPN

Answer №2

First and foremost, it’s crucial to ensure that the style rule is properly placed within your media query. The correct format should look like this:

@media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
}

The corrected version should be as follows:

@media screen and (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr;
  }
}

Secondly, it’s essential to reset both the grid-column and grid-row style rules for all the grid items:

// Variables for colors

:root {
  --highlight-color: #ff7264;
  --white-color: #fff;
  --text-color: #7f7f7f;
  --dark-bg-color: #2e2e2e;
  --light-bg-color: #fff;
  --gray-bg-color: #666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Services Section */

.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: repeat(3, 200px);
  grid-gap: 5px;
  margin: 5px;
}

.cell {
  background: var(--highlight-color);
  text-align: center;
  color: var(--white-color);
  padding: 10px;
}

.cell h3 {
  font-size: 20px;
}

.cell p {
  line-height: 1.4em;
}

.cell-1 {
  grid-column: 1/3;
  grid-row: 1/3;
  padding: 10px;
}

.cell-1 p,
.cell-4 p {
  font-size: 20px;
  line-height: 1.4em;
}

.cell-1 h3,
.cell-4 h3 {
  font-size: 30px;
}

.cell-1:hover {
  background-image: url("https://picsum.photos/460");
}

.cell-1:hover p,
.cell-1:hover h3 {
  opacity: 0;
  transition: 1000ms;
}

.cell-2 {
  background-image: url("https://picsum.photos/225");
}

.cell-2 h3,
.cell-2 p {
  opacity: 0;
}

.cell-2:hover {
  background: var(--highlight-color);
}

.cell-2:hover h3,
.cell-2:hover p {
  opacity: 1;
  transition: 1000ms;
}

.cell-3 {
  background-image: url("https://picsum.photos/225");
}

.cell-3 h3,
.cell-3 p {
  opacity: 0;
}

.cell-3:hover {
  background: var(--highlight-color);
}

.cell-3:hover h3,
.cell-3:hover p {
  opacity: 1;
  transition: 1000ms
}

.cell-4 {
  grid-column: 3/5;
  grid-row: 2/4;
  padding: 10px;
}

.cell-4:hover {
  background-image: url("https://picsum.photos/460");
  background-repeat: no-repeat;
  background-size: cover;
}

.cell-4:hover p,
.cell-4:hover h3 {
  opacity: 0;
  transition: 1000ms;
}

.cell-5 {
  background-image: url("https://picsum.photos/225");
}

.cell-5 h3,
.cell-5 p {
  opacity: 0;
}

.cell-5:hover {
  background: var(--highlight-color);
}

.cell-5:hover h3,
.cell-5:hover p {
  opacity: 1;
  transition: 1000ms;
}

.cell-6 {
  background-image: url("https://picsum.photos/225");
}

.cell-6 p,
.cell-6 h3 {
  opacity: 0;
}

.cell-6:hover {
  background: var(--highlight-color);
}

.cell-6:hover p,
.cell-6:hover h3 {
  opacity: 1;
  transition: 1000ms;
}

#services-section {
  text-align: center;
  margin-top: 30px;
  max-width: 900px;
  margin: 30px auto;
}

.services-title {
  font-size: 2em;
  text-shadow: 1px 1px var(--text-color);
  color: var(--highlight-color);
}

@media screen and (max-width: 768px) {
  .services-container {
    grid-template-columns: 1fr;
  }
  .services-container > div{
     grid-column: auto;
     grid-row: auto;
  }
}
<section id="services-section">
  <h2 class="services-title">Services</h2>
  <div class="services-container">
    <div class="cell cell-1">
      <h3>Creative Web Design Services</h3>
      <p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
        Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
    </div>
    <div class="cell cell-2">
      <h3>Digital Marketing</h3>
      <p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
    </div>
    <div class="cell cell-3">
      <h3>App Development</h3>
      <p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
    </div>
    <div class="cell cell-4">
      <h3>Website Maintenance</h3>
      <p>Extend your Website’s Lifespan</p>
      <p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
      <p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
    </div>
    <div class="cell cell-5">
      <h3>Web Development</h3>
      <p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
    </div>
    <div class="cell cell-6">
      <h3>Branding</h3>
      <p>Branding has never been more expansive, adventurous and agile than it is today</p>
    </div>
  </div>
</section>

Answer №3

I attempted to use a media query to change the grid template columns to 1fr at a specific break-point, but unfortunately that approach didn't yield the desired result.

  1. The issue might be that you omitted a selector in your media query. You provided the code without specifying where it should be applied.

    @media screen and (max-width: 768px) {
  grid-template-columns: 1fr; /* Selector missing */
}

  2. In addition, make sure to reset the column and row spans that have been defined previously.

    .cell-1 {
  grid-column: 1/3;
  grid-row: 1/3;
}

.cell-4 {
  grid-column: 3/5;
  grid-row: 2/4;
}

Here's an improved version:

@media screen and (max-width: 768px) {

  .services-container {
    grid-template-columns: 1fr;
  }

  .cell-1, .cell-4 {
    grid-column: auto;
    grid-row: auto;
  }
}


/* Custom color variables */
:root {
  --highlight-color: #ff7264;
  --white-color: #fff;
  --text-color: #7f7f7f;
  --dark-bg-color: #2e2e2e;
  --light-bg-color: #fff;
  --gray-bg-color: #666;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Styling for services section */
.services-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  grid-template-rows: repeat(3, 200px);
  grid-gap: 5px;
  margin: 5px;
}

.cell {
  background: var(--highlight-color);
  text-align: center;
  color: var(--white-color);
  padding-top: 10px;
}

.cell h3 {
  font-size: 20px;
}

.cell p {
  line-height: 1.4em;
}

.cell-1 {
  grid-column: 1/3;
  grid-row: 1/3;
  padding: 10px;
}

.cell-1 p, .cell-4 p {
  font-size: 20px;
  line-height: 1.4em;
}

.cell-1 h3, .cell-4 h3 {
  font-size: 30px;
}

.cell-1:hover {
  background-image: url("https://picsum.photos/460");
}

.cell-1:hover p, .cell-1:hover h3 {
  opacity: 0;
  transition: 1000ms;
}

.cell-2 {
  background-image: url("https://picsum.photos/225");
}

.cell-2 h3, .cell-2 p {
  opacity: 0;
}

.cell-2:hover {
  background: var(--highlight-color);
}

.cell-2:hover h3, .cell-2:hover p {
  opacity: 1;
  transition: 1000ms;
}

.cell-3 {
  background-image: url("https://picsum.photos/225");
}

.cell-3 h3, .cell-3 p {
  opacity: 0;
}

.cell-3:hover {
  background: var(--highlight-color);
}

.cell-3:hover h3, .cell-3:hover p {
  opacity: 1;
  transition: 1000ms
}

.cell-4 {
  grid-column: 3/5;
  grid-row: 2/4;
  padding: 10px;
}

.cell-4:hover {
  background-image: url("https://picsum.photos/460");
  background-repeat: no-repeat;
  background-size: cover;
}

.cell-4:hover p, .cell-4:hover h3 {
  opacity: 0;
  transition: 1000ms;
}

.cell-5 {
  background-image: url("https://picsum.photos/225");
}

.cell-5 h3, .cell-5 p {
  opacity: 0;
}

.cell-5:hover {
  background: var(--highlight-color);
}

.cell-5:hover h3, .cell-5:hover p {
  opacity: 1;
  transition: 1000ms;
}

.cell-6 {
  background-image: url("https://picsum.photos/225");
}

.cell-6 p, .cell-6 h3 {
  opacity: 0;
}

.cell-6:hover {
  background: var(--highlight-color);
}

.cell-6:hover p, .cell-6:hover h3 {
  opacity: 1;
  transition: 1000ms;
}

#services-section {
  text-align: center;
  margin-top: 30px;
  max-width: 900px;
  margin: 30px auto;
}

.services-title {
  font-size: 2em;
  text-shadow: 1px 1px var(--text-color);
  color: var(--highlight-color);
}

@media ( max-width: 600px ) {
  
  .services-container { grid-template-columns: 1fr; grid-template-rows: auto; }
  
  .cell-1 {
  grid-column: auto;
  grid-row: auto;

}

.cell-4 {
  grid-column: auto;
  grid-row: auto;

}
  
}
<section id="services-section">
  <h2 class="services-title">Services</h2>
  <div class="services-container">
    <div class="cell cell-1">
      <h3>Creative Web Design Services</h3>
      <p>Our web design services will greatly enhance your business’s presence on the Internet. Our designers mix a potent combination of brand strategy with a generous splash of creative juices and blend in the latest trends in Website UX and UI design.
        Since 2019, S&E has designed and built over 25 Websites from e-commerce, b2c, b2b, non-profit, to social networks. We even create custom web applications.</p>
    </div>
    <div class="cell cell-2">
      <h3>Digital Marketing</h3>
      <p>Our digital marketing services are driven not only by passion, but also a driving desire to deliver exceptional sales conversions.</p>
    </div>
    <div class="cell cell-3">
      <h3>App Development</h3>
      <p>Our app development services are sought after from venture capital start-ups to fortune 100 companies.</p>
    </div>
    <div class="cell cell-4">
      <h3>Website Maintenance</h3>
      <p>Extend your Website’s Lifespan</p>
      <p>By subscribing into a website maintenance plan with S&E, we can help your website keep up with the ever-changing and evolving industry.</p>
      <p>S&E is one of the leading website maintenance agencies. Our web maintenance packages cover everything that your website may need – from simple content updates to extensive design updates.</p>
    </div>
    <div class="cell cell-5">
      <h3>Web Development</h3>
      <p>If you’re looking for custom Internet applications or complex web development solutions, you’ve come to the right place.</p>
    </div>
    <div class="cell cell-6">
      <h3>Branding</h3>
      <p>Branding has never been more expansive, adventurous and agile than it is today</p>
    </div>
  </div>
</section>

Link to 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

CSS margin-left causing issues in Chrome Extension

My current situation is incredibly puzzling, as I am at a loss for what is happening. I developed a Firefox add-on using jQuery and CSS to revamp a website. When attempting to transfer the add-on to Chrome (which was relatively straightforward due to the s ...

javascripthtmlcssgoogle-chrome-extension

CSS style to choose the row in a bootstrap table with a specific class

This snippet is from a table created using Bootstrap: <div class="table-responsive"> <table class="table table-bordered table-striped"> <tbody> <tr> <td align="cent ...

htmlcsstwitter-bootstrapclassrow

Angular API data causing an undefined error in the template

When attempting to display values in an HTML template from API data, I encountered an issue. Despite not defining all the values in the object, the data is displayed correctly. However, an error appears in the console: TypeError: Cannot read property &ap ...

htmljsonangular

What is the best way to change the folder name when hovering over it?

Typically, my website displays categories with images from the /thumb-min/ directory. For example, 95-IMG_6509.JPG is loaded like this: /thumb-min/95-IMG_6509.JPG When I navigate to the details page, it loads the image from: /thumb-medium/95-IMG_6509.JP ...

javascriptphpjqueryhtmlcss

The inspection of Microsoft VS Code and Angular 2 tags within an HTML code validator

Recently, I began delving into Angular 2 within VSCode. However, I encountered an issue with the built-in HTML linter not recognizing Angular 2 directives like *ng-if or (click) when working on the "Tour of Heroes" project from Angular.io. Here is a glimps ...

javascripthtmlangularjsvisual-studio-code

Tips for integrating bootstrap code within PHP tags

<?php $con=mysqli_connect("localhost","root","","testdatabase"); // Check connection if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $result = mysqli_qu ...

phphtmlsqlbootstrap-4

Retrieve the ID Element from a separate HTML document

After countless hours of searching online, I still haven't found a solution... My goal is to integrate elements from another HTML file into my own homepage using AngularJS. I'm hopeful that someone here can provide assistance. Thank you! ...

javascripthtmlangularjs

Prevent bootstrap columns in a single row from adjusting their heights uniformly

After spending a good amount of time reading through various questions and attempting to solve my issue, I am finally seeking help from all of you. This is what I currently have: The code in action I am aiming for the following outcome: Desired result ...

htmlcssbootstrap-4

How can I extract text from a website without retaining number, dot, and alphabet bullets in the list?

I am currently using Python 2.7.8 for a project involving a website with text displayed in an ordered list format using ol tags. I need to extract the specific text items listed below: Coffee Tea Milk This is an example of the HTML code used on my websit ...

pythonhtmlweb-scrapingbeautifulsoup

Finding the optimal image prediction from HTML using Google JSoup - A guide

Our goal is to accurately identify the best guess for an image based on the HTML content of the search results page returned by Google. Among the various classes present, we know that the best guess is associated with the class qb-b. To target this specifi ...

javahtmljsoupgoogle-image-search

Align the Media center div within a column utilizing Bootstrap

I have a template in html with a media object containing a logo and text, both within a column of width 5. Currently, it is not centered and aligned to the left. I am looking for a way to centrally align the media block within the column, regardless of its ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Using innerHTML to replaceAll also modifies characters within the tags

I created a custom function to emphasize specific strings within a text by surrounding them with span tags and updating the content using the innerHTML property of the targeted element. However, I encountered an issue while working with innerHTML instead ...

javascripthtmlcss

Clicking on the Node.js subscription button sends me to the local host 127.0.0.1

I'm encountering an issue where clicking the subscribe button redirects my page to 127.0.0.1 and nothing appears in the console.log. Can anyone help me understand why this is happening? HTML <!DOCTYPE html> <html lang="en"> <head&g ...

javascripthtmlcssnode.js

Easy way to eliminate empty elements following a class using jQuery

I'm encountering a situation where I have a group of elements following a specific class that are either empty or contain only white space. <div class="post-content"> <div class="slider-1-smart"> --- slider contents --- < ...

javascriptjqueryhtmlcsswordpress

Struggling to get the knockout js remove function to function properly within a nested table structure

I've been encountering issues while trying to eliminate the formulation elements with the 'Delete comp' link. I can't seem to figure out why it's not functioning as expected. Moreover, the 'Add another composition' link o ...

javascripthtmlknockout.js

Transforming HTML output into JSON format on Firefox

Currently, I have a JSON file named persons.json that contains information about various individuals. [ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":" ...

htmljsonfirefoxmime

Support for these CSS properties of left: 0; and right: 0; are compatible with

Just wondering if it's okay to utilize the CSS code below to ensure the element adjusts to its parent's width. .element { position: absolute; left: 0; right: 0; background-color: #ccc; border-top: 1px solid #ddd; } We don&ap ...

htmlcss

Are there performance concerns with utilizing array.includes in Angular templates?

My component has changeDetection:  ChangeDetectionStrategy.OnPush and a variable that is an array. ids:Array<number>; addId(id:number){ this.ids.push(id) } In the template, I am using: <div [class.active]="ids.includes(step.id)">& ...

htmlangularvue.js

During an upgrade, IndexedDB replaces existing values

After successfully creating a JSON data set that is passed into IndexedDB during the upgrade event, everything seems to be working fine as it creates a well-structured database without any issues. However, the problem arises when trying to upgrade the data ...

javascriptdatabasehtmlindexeddb

What could be the reason for JavaScript code successfully exporting to Excel using the old office extension .xls but encountering issues when trying to export

I am currently working on exporting an HTML table to Excel using JavaScript. I have encountered an issue where it does not export to the newer version of Excel with the xlsx extension. However, it works fine and exports to older versions of Excel with the ...

javascripthtmljquerycssexport-to-excel