Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
30
Comments
3
alec
@AlecANL

All comments

  • Thamara Ramos Deffitt•20
    @thamaraRD
    Submitted over 3 years ago

    order summary whit css html

    1
    alec•775
    @AlecANL
    Posted over 3 years ago

    Hola Thamara, de quedo genial no soy un experto, pero te puedo dejar algunas cosas que vi. No sé si lo notaste, pero en tamaños de 320 que creo es lo más pequeño, se desborda un poco, generado un scroll horizontal.

    Pienso que estás utilizando algunos margins que no son necesarios. Te dejo un ejemplo.

    Tienes esto

    <div class="box">
      <div class="child"></div>
      <div class="child"></div>
    </div>
    

    Para separarlo no es necesario que uses un margin, si en la clase box estás usando flexbox. En lugar de un margin utiliza gap.

    Otro caso que note es en tu clase .box puedes quitarle el margin, y el width quemado que le colocaste y puedes utilizar la propiedad: margin-inline: 10px por ejemplo y se lo va a aplicar en ambos lados (left, right).

    Puedes encapsular en otro div la imagen y .info en .box y vas a tener algo así

      <div class="box">
        <div class="box-child">
          <img src="./images/icon-music.svg"              alt="icon music">
        <div class="info-box">
          <h3>Annual Plan</h3>
          <span>$59.99/year</span>
        </div>
    
    </div>
          <a class="a-change" href="#">Change</a>
      </div>
    
    
    .box {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      align-items:center;
      margin-inline: 10px;
      outline: 1px solid red;
      padding-block: 8px;
    }
    
    .box > * {
      outline: 1px solid red;
    }
    
    h3 {
      margin: 0
    }
    
    .box-child {
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    

    Espero te sirva. como te lo recuerdo no soy un experto, pero espero te pueda servir.

  • Sodja Nathan O.•205
    @NateOs
    Submitted about 4 years ago

    Mobile first site, using CSS and BEM

    5
    alec•775
    @AlecANL
    Posted about 4 years ago

    Hey, Sodja Nathan. I'm not an expert, but I use these media queries: very small: 320px, medium: 480px, big: 768px, bigger: 1024px, very big: 1366px, and very, very big xD: 1920px.

    This does not mean do you use all media queries. Do you use required in your website or application, etc...

    And if you want to reduce the size of your css bundle, you may use sass with minify sass

    Marked as helpful
  • Natasha•50
    @njohnson533
    Submitted about 4 years ago

    3 Column Preview Card Component

    1
    alec•775
    @AlecANL
    Posted about 4 years ago

    Hey natasha, I'm not expert but a try to help you, may use auto sizing column property in CSS grid. More explicit for example: grid-template-column: repeat(auto-fill,minmax(250px,1fr)) I'm not sure if that answer your questions, but if you want to read more.

    css tricks

    and another example: codepen

    I hope to help you.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub