Grid Template Columns not working on media queries

Question

I don't know why:

grid-template-columns: 1fr;

isn't working for:

@media (max-width: 376px)

My code:

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Spartan", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: hsl(303, 10%, 53%);
}

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url(images/bg-pattern-top-desktop.svg),
    url(images/bg-pattern-bottom-desktop.svg);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  padding: 2.4rem;
}

.card {
  max-width: 120rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22rem;
  row-gap: 6.4rem;
}

.heading {
  font-size: 4.4rem;
  color: hsl(300, 43%, 22%);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.sub-heading {
  line-height: 1.7;
  font-weight: 500;
}

.ratings {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin: 2.4rem 0;
}

.rating {
  background-color: hsl(300, 24%, 96%);
  padding: 1.8rem 2.4rem;
  border-radius: 8px;
  color: hsl(300, 43%, 22%);
  font-weight: 700;
}

.rating--reviews {
  transform: translateX(-7.2rem);
}

.rating--guru {
  transform: translateX(-3.6rem);
}

.icons {
  margin-right: 2.4rem;
}

.testimonials {
  grid-column: span 2;
  display: flex;
  gap: 2.4rem;
}

.testimonial {
  background-color: hsl(300, 43%, 22%);
  padding: 4.8rem 2.4rem;
  border-radius: 9px;
}

.testimonial-irene {
  transform: translateY(2.4rem);
}

.testimonial-anne {
  transform: translateY(4.8rem);
}

.user-details {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  margin-bottom: 2.4rem;
}

.testimonial-img {
  width: 4rem;
  border-radius: 50%;
}

.user-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.user-name {
  font-size: 1.4rem;
  color: hsl(0, 0%, 100%);
  font-weight: 700;
}

.user-verified {
  color: hsl(333, 80%, 67%);
  font-size: 1.4rem;
  font-weight: 500;
}

.testimonial blockquote {
  line-height: 1.6;
  font-weight: 500;
  color: hsl(300, 24%, 96%);
}

@media (max-width: 376px) {
  main {
    background-image: url(images/bg-pattern-top-mobile.svg),
      url(images/bg-pattern-bottom-mobile.svg);
  }

  .card {
    grid-template-columns: 1fr;
    gap: 0;
  }
}



  
    
    
    

    
    
    
    
    

    Frontend Mentor | Social proof section
  
  
    
      
        
          10,000+ of our users love our products.
          
            We only provide great products combined with excellent customer
            service. See what our satisfied customers are saying about our
            services.
          
        
        
          
            
              
              
              
              
              
            
            Rated 5 Stars in Reviews
          
          
            
              
              
              
              
              
            
            Rated 5 Stars in Report Guru
          
          
            
              
              
              
              
              
            
            Rated 5 Stars in BestTech
          
        
        
          
            
              
              
                Colton Smith
                Verified Buyer
              
            
            
              "We needed the same printed design as the one we had ordered a
              week prior. Not only did they find the original order, but we also
              received it in time. Excellent!"
            
          
          
            
              
              
                Irene Roberts
                Verified Buyer
              
            
            
              "Customer service is always excellent and very quick turn around.
              Completely delighted with the simplicity of the purchase and the
              speed of delivery."
            
          
          
            
              
              
                Anne Wallace
                Verified Buyer
              
            
            
              "Put an order with this company and can only praise them for the
              very high standard. Will definitely use them again and recommend
              them to everyone!"

Code and result side by side

user_18419948 · Answer

The problem is using translateX with pixels - 1 rem = 16 px; This is what makes your grid elements cover the text on the right

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

html {
  font-size: 62.5%;
}

body {
  font-family: "Spartan", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: hsl(303, 10%, 53%);
}

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url(images/bg-pattern-top-desktop.svg),
    url(images/bg-pattern-bottom-desktop.svg);
  background-position: top left, bottom right;
  background-repeat: no-repeat;
  padding: 2.4rem;
}

.card {
  max-width: 120rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 22rem;
  row-gap: 6.4rem;
}

.heading {
  font-size: 4.4rem;
  color: hsl(300, 43%, 22%);
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.sub-heading {
  line-height: 1.7;
  font-weight: 500;
}

.ratings {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  margin: 2.4rem 0;
}

.rating {
  background-color: hsl(300, 24%, 96%);
  padding: 1.8rem 2.4rem;
  border-radius: 8px;
  color: hsl(300, 43%, 22%);
  font-weight: 700;
}

.rating--reviews {
  transform: translateX(-7.2%);
}

.rating--guru {
  transform: translateX(-3.6%);
}

.icons {
  margin-right: 2.4rem;
}

.testimonials {
  grid-column: span 2;
  display: flex;
  gap: 2.4rem;
}

.testimonial {
  background-color: hsl(300, 43%, 22%);
  padding: 4.8rem 2.4rem;
  border-radius: 9px;
}

.testimonial-irene {
  transform: translateY(2.4rem);
}

.testimonial-anne {
  transform: translateY(4.8rem);
}

.user-details {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  margin-bottom: 2.4rem;
}

.testimonial-img {
  width: 4rem;
  border-radius: 50%;
}

.user-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
}

.user-name {
  font-size: 1.4rem;
  color: hsl(0, 0%, 100%);
  font-weight: 700;
}

.user-verified {
  color: hsl(333, 80%, 67%);
  font-size: 1.4rem;
  font-weight: 500;
}

.testimonial blockquote {
  line-height: 1.6;
  font-weight: 500;
  color: hsl(300, 24%, 96%);
}

@media (max-width: 376px) {
  main {
    background-image: url(images/bg-pattern-top-mobile.svg),
      url(images/bg-pattern-bottom-mobile.svg);
  }
   
  .card {
    grid-template-columns: 1fr;
    gap: 0;
  }
}



  
    
    
    

    
    
    
    
    

    Frontend Mentor | Social proof section
  
  
    
      
        
          10,000+ of our users love our products.
          
            We only provide great products combined with excellent customer
            service. See what our satisfied customers are saying about our
            services.
          
        
        
          
            
              
              
              
              
              
            
            Rated 5 Stars in Reviews
          
          
            
              
              
              
              
              
            
            Rated 5 Stars in Report Guru
          
          
            
              
              
              
              
              
            
            Rated 5 Stars in BestTech
          
        
        
          
            
              
              
                Colton Smith
                Verified Buyer
              
            
            
              "We needed the same printed design as the one we had ordered a
              week prior. Not only did they find the original order, but we also
              received it in time. Excellent!"
            
          
          
            
              
              
                Irene Roberts
                Verified Buyer
              
            
            
              "Customer service is always excellent and very quick turn around.
              Completely delighted with the simplicity of the purchase and the
              speed of delivery."
            
          
          
            
              
              
                Anne Wallace
                Verified Buyer
              
            
            
              "Put an order with this company and can only praise them for the
              very high standard. Will definitely use them again and recommend
              them to everyone!"

I changed translate x units to % and when the width goes below 376px, the elements don't translate at all. It should solve the problem

Grid Template Columns not working on media queries

1 Answers