'Grid Template Columns not working on media queries
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;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Social proof section</title>
</head>
<body>
<main>
<section class="card">
<div class="card--text-content">
<h1 class="heading">10,000+ of our users love our products.</h1>
<p class="sub-heading">
We only provide great products combined with excellent customer
service. See what our satisfied customers are saying about our
services.
</p>
</div>
<div class="ratings">
<p class="rating rating--reviews">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in Reviews
</p>
<p class="rating rating--guru">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in Report Guru
</p>
<p class="rating rating--best">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in BestTech
</p>
</div>
<div class="testimonials">
<figure class="testimonial testimonial-colton">
<div class="user-details">
<img
src="images/image-colton.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Colton Smith</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"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!"
</blockquote>
</figure>
<figure class="testimonial testimonial-irene">
<div class="user-details">
<img
src="images/image-irene.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Irene Roberts</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"Customer service is always excellent and very quick turn around.
Completely delighted with the simplicity of the purchase and the
speed of delivery."
</blockquote>
</figure>
<figure class="testimonial testimonial-anne">
<div class="user-details">
<img
src="images/image-anne.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Anne Wallace</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"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!"
</blockquote>
</figure>
</div>
</section>
</main>
</body>
</html>
Solution 1:[1]
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;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Spartan:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | Social proof section</title>
</head>
<body>
<main>
<section class="card">
<div class="card--text-content">
<h1 class="heading">10,000+ of our users love our products.</h1>
<p class="sub-heading">
We only provide great products combined with excellent customer
service. See what our satisfied customers are saying about our
services.
</p>
</div>
<div class="ratings">
<p class="rating rating--reviews">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in Reviews
</p>
<p class="rating rating--guru">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in Report Guru
</p>
<p class="rating rating--best">
<span class="icons">
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
<svg
class="icon"
width="17"
height="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.539 6.097a.297.297 0 00-.24-.202l-5.36-.779L8.542.26a.296.296 0 00-.53 0L5.613 5.117l-5.36.779a.297.297 0 00-.165.505l3.88 3.78-.917 5.34a.297.297 0 00.43.312l4.795-2.52 4.794 2.52a.296.296 0 00.43-.313l-.916-5.338L16.464 6.4c.08-.08.11-.197.075-.304z"
fill="#EF9546"
fill-rule="nonzero"
/>
</svg>
</span>
Rated 5 Stars in BestTech
</p>
</div>
<div class="testimonials">
<figure class="testimonial testimonial-colton">
<div class="user-details">
<img
src="images/image-colton.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Colton Smith</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"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!"
</blockquote>
</figure>
<figure class="testimonial testimonial-irene">
<div class="user-details">
<img
src="images/image-irene.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Irene Roberts</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"Customer service is always excellent and very quick turn around.
Completely delighted with the simplicity of the purchase and the
speed of delivery."
</blockquote>
</figure>
<figure class="testimonial testimonial-anne">
<div class="user-details">
<img
src="images/image-anne.jpg"
class="testimonial-img"
alt="Image of User"
/>
<div class="user-content">
<p class="user-name">Anne Wallace</p>
<p class="user-verified">Verified Buyer</p>
</div>
</div>
<blockquote>
"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!"
</blockquote>
</figure>
</div>
</section>
</main>
</body>
</html>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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Grek |