Search code examples
csscss-grid

Convert Two Col layout for Mobile

I need to make this layout responsive for mobile and nothing seems to make it work. I am trying to stack these two columns on a mobile layout.

you can see the current layout in its entirety here. https://goodclickmedia.com/2-col-layout/

I only included the top two columns to reduce code on the post.

Specifically, I need a media break on this page at the mobile device level say 600px. So that when this page is accessed via mobile, the tiles will stack on top of each other and produce a single column. I've tried a number of @media tweaks and nothing seems to impact .container

<style>

@media only screen and (min-width: 600px) {
  .container {
    display: flex;
  }
}


.container {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 10px 10px;
    grid-auto-flow: row;
    grid-template-areas:
      "Col-One Col-Two"
      "Col-Three Col-Four"
      "Col-Five Col-Six"
      "Col-Seven Col-Eight"
      "Col-Nine Col-Ten";
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .Col-One {  display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Left-Nest-Lt-Col Left-Nest-Rt-Col";
    grid-area: Col-One;
    border: 1px solid;
    border-color: #cacaca;
    max-width: 550px;
  }
  
  .Left-Nest-Rt-Col { grid-area: Left-Nest-Rt-Col; }
  
  .Left-Nest-Lt-Col { 
    grid-area: Left-Nest-Lt-Col; 
    max-width: 125px; 
    border: 1px green !important; 
}
  
  .Col-Two {  display: grid;
    grid-template-columns: 0.5fr 1.5fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "Rt-Nest-Lt-Col2 Rt-Nest-Rt-Col2";
    grid-area: Col-Two;
    border: 1px solid;
    border-color: #cacaca;
    max-width: 550px;
  }
  
  .Rt-Nest-Lt-Col2 { grid-area: Rt-Nest-Lt-Col2; }
  
  .Rt-Nest-Rt-Col2 { grid-area: Rt-Nest-Rt-Col2; }
  
  
  /* ZOOM IN FEATURE - RAISED SECTION ELEMENT - COMMENT ADDED BY JOHN CHAMBERS */
.zoom {
  padding: 0px;
  background-color: #fafafa;
  transition: transform .2s; /* Animation */
  width: 550px;
  height: 125px;
  /*margin: 0 auto;*/
}

.zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.block:hover {
    background-color: #fafafa;
}

.block:hover, .block:hover h2 {
    color:#DC582A ;
}

.block:hover, .block:hover p {
    color:#202020 ;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  color: #202020;
  font-size: 20px;
}
</style>  
<div class="container">
    <div class="Col-One zoom block">
      <div class="Left-Nest-Lt-Col"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
      <div class="Left-Nest-Rt-Col"><h2>TITLE HERE</h2><p>Some copy goes here that will be reflective of title.</p></div>
    </div>
    <div class="Col-Two zoom block">
      <div class="Rt-Nest-Lt-Col2"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
      <div class="Rt-Nest-Rt-Col2"><h2>TITLE HERE2</h2><p>Some copy goes here that will be reflective of title.</p></div>
    </div>
   
  </div>

Solution

  • There are a few things:

    1. min-width is exactly that, the minimum width when the styles/properties will start to affect elements. What you want, in this example, is max-width
    2. CSS, including media queries is cascading, so a max-width media query will need to come AFTER all your other styles.
    3. EDIT Mobile first below. Original: (And we won't get into this), you should start (in my opinion) with the mobile styles and then change with min-width media queries, since often times only a few properties on selectors will change as the browser window increases in width.

    What I changed - keeping the CSS Grid styles. (you can certainly change the .container to a flex parent.)

    1. Added a max-width media query after everything.
    2. Reset the grid-area styles
    @media (max-width: 800px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: initial;
  }
  .block {
    grid-area: initial;
  }
}


    .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
  grid-auto-flow: row;
  grid-template-areas: "Col-One Col-Two" "Col-Three Col-Four" "Col-Five Col-Six" "Col-Seven Col-Eight" "Col-Nine Col-Ten";
  max-width: 1200px;
  margin: 0 auto;
}

.Col-One {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "Left-Nest-Lt-Col Left-Nest-Rt-Col";
  grid-area: Col-One;
  border: 1px solid;
  border-color: #cacaca;
  max-width: 550px;
}

.Left-Nest-Rt-Col {
  grid-area: Left-Nest-Rt-Col;
}

.Left-Nest-Lt-Col {
  grid-area: Left-Nest-Lt-Col;
  max-width: 125px;
  border: 1px green !important;
}

.Col-Two {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: "Rt-Nest-Lt-Col2 Rt-Nest-Rt-Col2";
  grid-area: Col-Two;
  border: 1px solid;
  border-color: #cacaca;
  max-width: 550px;
}

.Rt-Nest-Lt-Col2 {
  grid-area: Rt-Nest-Lt-Col2;
}

.Rt-Nest-Rt-Col2 {
  grid-area: Rt-Nest-Rt-Col2;
}


/* ZOOM IN FEATURE - RAISED SECTION ELEMENT - COMMENT ADDED BY JOHN CHAMBERS */

.zoom {
  padding: 0px;
  background-color: #fafafa;
  transition: transform .2s;
  /* Animation */
  width: 550px;
  height: 125px;
  /*margin: 0 auto;*/
}

.zoom:hover {
  transform: scale(1.1);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.block:hover {
  background-color: #fafafa;
}

.block:hover,
.block:hover h2 {
  color: #DC582A;
}

.block:hover,
.block:hover p {
  color: #202020;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  color: #202020;
  font-size: 20px;
}

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: initial;
  }
  .block {
    grid-area: initial;
  }
}
    <div class="container">
  <div class="Col-One zoom block">
    <div class="Left-Nest-Lt-Col"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
    <div class="Left-Nest-Rt-Col">
      <h2>TITLE HERE</h2>
      <p>Some copy goes here that will be reflective of title.</p>
    </div>
  </div>
  <div class="Col-Two zoom block">
    <div class="Rt-Nest-Lt-Col2"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
    <div class="Rt-Nest-Rt-Col2">
      <h2>TITLE HERE2</h2>
      <p>Some copy goes here that will be reflective of title.</p>
    </div>
  </div>

</div>

    Opinionated Mobile First

    Here's mobile first and after looking at your site, this can be super simplified:

    1. A display property doesn't necessarily need to be set until 601px and higher, your blocks will stack because they are block elements.
    2. The media query for the grid is below the rest of the CSS.

    .container {
  max-width: 1200px;
  margin: 0 auto;
}

.block {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  border: 1px solid;
  border-color: #cacaca;
  max-width: 550px;
  margin-bottom: 10px;
}

.l-col {
  max-width: 125px;
  border: 1px green !important;
}


/* ZOOM IN FEATURE - RAISED SECTION ELEMENT - COMMENT ADDED BY JOHN CHAMBERS */

.zoom {
  padding: 0px;
  background-color: #fafafa;
  transition: transform .2s;
  /* Animation */
  width: 550px;
  height: 125px;
  /*margin: 0 auto;*/
}

.zoom:hover {
  transform: scale(1.1);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.block:hover {
  background-color: #fafafa;
}

.block:hover,
.block:hover h2 {
  color: #DC582A;
}

.block:hover,
.block:hover p {
  color: #202020;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.heading {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  color: #202020;
  font-size: 20px;
}

@media (min-width:601px) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(10, 1fr); /* the 10 can change to however many rows you actually need */
    gap: 10px 10px;
    grid-auto-flow: row;
  }
  .block {
    margin-bottom: 0;
  }
}
    <div class="container">
  <div class="zoom block">
    <div class="l-col"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
    <div class="r-col">
      <h2>TITLE HERE</h2>
      <p>Some copy goes here that will be reflective of title.</p>
    </div>
  </div>
  <div class="zoom block">
    <div class="l-col"><img style="padding-top:5px; height: 125px;" border="0" src="https://staging9.flashglobal.com/wp-content/uploads/2022/06/icon_list_400px_2.png"></div>
    <div class="r-col">
      <h2>TITLE HERE2</h2>
      <p>Some copy goes here that will be reflective of title.</p>
    </div>
  </div>
</div>