Skip to content
OverviewSolutions
30
Comments
3
alec
@AlecANL

All comments

  • alec•775
    @AlecANLPosted almost 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.

    0
  • alec•775
    @AlecANLPosted over 3 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
    0
  • Natasha•50
    @njohnson533Submitted over 3 years ago

    Update: I figured out how to make the grid container responsive, but now I have another issue. I have noticed that when I use width: 100% in the body the desktop version is centered, but its stuck to the top of the page. When I use width: 100vh in the body, the desktop version is centered in both axes, but the mobile view cuts off the stop of the sedan card and the grid container isnt centered. Could anyone tell me how to center the grid container so that its consistent in both views or is this not possible with CSS Grid? Ive been trying to use CSS Grid over flexbox as thats my weak area, I thought they could render the same results, but maybe im wrong?

    3 Column Preview Card Component

    1
    alec•775
    @AlecANLPosted over 3 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.

    2