How to make 3 column CSS grid change into 1 column on mobiles with media query

Question

I'm using CSS Grid to make text mixed with pictures on the large screens. I want them to form a column on mobiles though. Basically 3 columns on desktops and 1 column on mobile devices. How to make it happen using media query? I was thinking about finding command for grid to disable while under 768px but don't even know if such a thing exist.

.history {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1em;
  grid-row-gap: 100px;
}

.box1 {
  grid-column: 1/3;
}

.box2 {
  grid-column: 3;
  justify-self: center;
}

.box3 {
  grid-column: 1;
  justify-self: center;
}

.box4 {
  grid-column: 2/4;
}

.box5 {
  grid-column: 1/3;
}

.box6 {
  grid-column: 3;
  justify-self: center;
}

.box7 {
  grid-column: 1/4;
}

<div class="history">
  <div class="box1">
    <p>
      The story starts in 2010 with Hartstown
    </p>
  </div>
  <div class="box2">
    <img src="images/clubs.jpg" alt="Clubs">
  </div>
  <div class="box3">
    <img src="images/clubs1.jpg" alt="Clubs">
  </div>
  <div class="box4">
    <h3>Clubs Officialy Merge... </h3>
    <p>May 2011 saw the Official launch of Hartstown Aldridge Legends X1 in Dalymount Park...
    </p>
  </div>
  <div class="box5">
    <h3>Our First Full Season... </h3>
    <p>We started the 2011 / 2012 Season with Approx 280 registered club altogether we had 18 Teams…..
    </p>
  </div>
  <div class="box6">
    <img src="images/logo.jpg" alt="Logo">
  </div>
  <div class="box7">
    <h3>Forging Ahead... </h3>
    <p>We presently have approx 400 Registered Club Players and approx 60 nd 2 Over 35'5 Teams and we are still growing...
    </p>
  </div>
</div>

Solution 1

@media only screen and (max-width: 768px) {
  .history {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1em;
    grid-row-gap: 100px;
  }
}

Just add the CSS properties of elements in your page that you want to look like on mobile. max-width means any device's screen size, less than 768px will show this CSS styles overriding the default styles.

Making grid-template-columns: 1fr; will make use of full width of the device screen, which is your requirement.

Please note: Put the @media queries only after the default CSS styles.

Solution 2

I know you have a couple other answers above, and one of which you chose as preferred - but the simplest, most elegant solution, which will save you the headache of having to reset all the boxes, is to declare .history as a block inside your small device media query. That is it. One line change.

@media only screen and (max-width: 768px) {
    .history {
       display: block;
    }
}

I tested it on your snippet above, and merely changing 'display: grid;' to 'display: block;' will allow the browser(s) to behave as they normally would, with all block elements stacking.

If you have any further questions, hit me up.

Comments

[kalibvb]

It is not working. Do you think the reason could be having text spread over 2 columns on large screens? I was trying your way before and it did not change a thing. Basically format of my grid looks like this: Text-text pic Pic text-text where text is spread over two columns in one row.

[kalibvb]

It is not working. Do you think the reason could be having text spread over 2 columns on large screens? I was trying your way before and it did not change a thing. Basically format of my grid looks like this: Text-text pic Pic text-text where text is spread over two columns in one row.

[Lazar Nikolic]

I really don't know. Could you put your code on codepen or some other site like that in order for us to see exactly what are you talking about. That would be very helpful.

[Harish ST]

You have to also change the grid-column for every boxes. Then only it will be visible.

[kalibvb]

And that worked. Thanks a lot. I never thought about changing grid column.

[Harish ST]

Happy to hear! I thought you were unaware of CSS media queries only. :)