All comments

• 

  Thamara Ramos Deffitt• 40

  @thamaraRD

  Submitted over 2 years ago

  

  order summary whit css html

  1

  4

  0

  

  alec• 775

  @AlecANL

  Posted over 2 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

  This comment has received 1 replyShow
• 

  Sodja Nathan O.• 205

  @NateOs

  Submitted almost 3 years ago

  How many media queries is too much, also how do I reduce the length of my css, aside from shorthand or perhaps SASS ?

  

  Mobile first site, using CSS and BEM

  5

  1

  0

  

  alec• 775

  @AlecANL

  Posted almost 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

  @njohnson533

  Submitted almost 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

  1

  0

  

  alec• 775

  @AlecANL

  Posted almost 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

  This comment has received 1 replyShow