Add this to your code:
.packages-cards {
justify-items: center;
}
.packages-cards div {
padding: 50px;
}
Solution 1 :
Solution 2 :
This part cause the align to the left (centering is breaking).
@media(min-width: 996px) {
.packages-cards div {
margin: 50px 0;
max-width: 300px;
}
}
Change it to mage the block centered to
@media(min-width: 996px) {
.packages-cards div {
margin: 50px auto;
max-width: 300px;
}
}
Although you can add width: 100%; or min-width: 230px;, depending on your taste.
Problem :
Whenever I resize the browser to max, everything works but the cards in the packages section aren’t center. What am I missing?
https://jolly-poitras-00d5ec.netlify.app/
/* Packages */
.packages {
background-color: #F3F1F6;
text-align: center;
font-family: 'Roboto', sans-serif;
padding: 50px 0;
}
.packages-title h4 {
font-weight: 300;
opacity: 50%;
}
.packages-title h2 {
font-size: 2em;
}
.packages-cards h1 {
font-family: 'Lato';
font-size: 4em;
padding: 10px 0 20px;
}
.packages-cards div {
background-color: #fff;
margin: 50px auto;
padding: 50px 0;
max-width: 350px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
}
.packages-cards h4 {
font-weight: 300;
opacity: 50%;
}
.packages-cards p {
font-weight: 300;
opacity: 50%;
line-height: 2;
padding-bottom: 20px;
}
@media(min-width: 996px) {
.container {
margin: 0 10%;
}
.showcase {
background-image: url('imgs/cityline.jpg');
}
.showcase-content h1 {
font-size: 2.5em;
}
.showcase-content p {
margin: 20px 0 45px 0;
}
.about-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 60px;
}
.about-cards div {
max-width: 300px;
}
.packages-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.packages-cards div {
margin: 50px 0;
max-width: 300px;
}
.sign-up {
background-image: url('imgs/signup-1200.jpg');
}
}<section class="packages">
<div class="packages-title">
<h4>A plan for everyone</h4>
<h2>Plans & Pricing</h2>
</div>
<div class="container">
<div class="packages-cards">
<div class="basic">
<h4>Basic Plan</h4>
<h1>$49</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
<div class="plus">
<h4>Plus Plan</h4>
<h1>$79</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
<div class="pro">
<h4>Pro Plan</h4>
<h1>$99</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
</div>
</div>
</section>Comments
Comment posted by Vepth
Please provide code and more information in your post.
Comment posted by FluffyKitten
As the answers below worked for you, you can still accept one even though you found the answer yourself while they were being posted. You say Michael’s answer is exactly the solution you found – it wasn’t a race to be the first to find it, so that sounds like it is deserving of an accept 🙂
Comment posted by supernova
I just figured this exact solution out. Thank you for trying to help!
Comment posted by supernova
Thank you! While I was waiting, I figured out that giving