Plans Block in Moshified

HTML/CSS
1

Hi friends.
Can you please review my code and help me find the mistake I have done?
I am trying to build the Plans Block of Moshified, but for larger screen my grid is not laying horizontal. I tried to do as Mosh were doing and also width Media query however I am not succeeding. Many thanks

HTML

  <div class="grid grid--1x3">

    <div class="plan">

      <div class="card card--secondary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--secondary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

    <div class="plan plan--popular">

      <div class="card card--primary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--primary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

    <div class="plan">

      <div class="card card--secondary">

        <header class="card__header">

          <h3 class="plan__name">Business</h3>

          <span class="plan__price">$24</span>

          <span class="plan__billing-cycle">/month</span>

          <span class="badge badge--secondary badge--small">20% OFF</span>

          <span class="plan__description">Optimal Cloud experience</span>

        </header>

        <div class="card__body">

          <ul class="list list--tick">

            <li class="list__item">Unlimited Websites</li>

            <li class="list__item">Unlimited Bandwidth</li>

            <li class="list__item">100 GB SSD Storange</li>

            <li class="list__item">3 GB RAM</li>

            <li class="list__item">2 CPU Cores</li>

          </ul>

          <button class="btn btn--outline btn--block">BUY NOW</button>

        </div>

      </div>

    </div>

  </div>

</section>

CSS

/* Plan Block */

.block-plans .grid {

gap: 4rem;

}

@media screen and (min-width: 768px) {

.block-plans .card {

grid-template-columns: repeat(3, 1fr);

max-width: 500px;

margin: 0 auto;

}

}

2

I already find out my mistake :smiley:

Sometimes better leave issues and try to fix them when you are fresh :)))

3

What was your mistake? I have the same problem right now.

4

Happy to hear that your issue is resolved. If you face any other difficulty feel free to ask here in the community.

5

Hi friends.
Can you please review my code and help me find the mistake I have done?
I am trying to build the Plans Block of Moshified, but for larger screen my grid is not laying horizontal. I tried to do as Mosh were doing and also width Media query however I am not succeeding.

So, software development can be a challenge. I’m interested in artificial intelligence and how it can be used for business. I found a very useful and interesting article about AI-Powered LMS Platform on ddi-dev and it gave me a new perspective on these things! I recommend you to read it and think about how you can use it for your own purposes!

Many thanks

To make the grid layout display correctly on larger screens, you need to ensure that you have the appropriate CSS rules for your .grid class and the media query for larger screens.