Need help how to use @media

HTML-CSS
1 
  <section id="article-section">
    <div class="par1 par">
      <div class="round-num">
        <p class="section-num">1</p>
      </div>
      <article class="num-article">
        <h2 class="section-num">Actionable insights</h2>
        <p>Optimize your products, improve customer satisfaction and stay ahead of the competition with our product data analytics.</p>
      </article>
    </div>
    <div class="par2 par">
      <div class="round-num">
        <p class="section-num">2</p>
      </div>
      <article class="num-article">
        <h2 class="section-num">Data-driven decisions</h2>
        <p>Make data-driven decisions with our product data analytics. Our Ai-generated reports help you unlock insights hidden in your product data.</p>
      </article>
    </div>
    <div class="par3 par">
      <div class="round-num">
        <p class="section-num">3</p>
      </div>
      <article class="num-article">
        <h2 class="section-num">Always affordable</h2>
        <p>Always affordable pricing that scales with your business. Get top-quality product data analytics services without hidden costs or unexpected fees.</p>
      </article>
    </div>
  </section>

CSS:

.par {
    display: flex;
    flex-direction: column;
}

.round-num {
    border: 1px solid var(--black);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-content: center;
    margin-inline: auto;
    margin-block: 2rem;
}

.section-num {
    font-size: 1.95rem;
    font-family: fraunces, sans-serif;
    font-weight: var(--bold-font);
}

.num-article p {
    font-family: manrope, sans-serif;
    font-size: 1.55rem;
    margin-block-start: 2rem;
}

i need help how to layout from

Capture
Capture355×763 144 KB

to

capture1
capture1710×462 144 KB

i try use @media method but didn’t work. Can someone help?

/* Tablet design */
@media screen and (min-width:680) {
    .par {
        flex-direction: row;
    }
}
2

@media screen and (min-width:680)

You’re very, very close! 680…. whats? Inches, chickens? Give the code a unit and see what happens :slight_smile:

1 Like
3

Thank you! I’m so careless

4

No worries, there are so many fiddly details it’s easy to forget one sometimes!