alec
@AlecANLAll comments
- @thamaraRD@AlecANL
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.
- @NateOs@AlecANL
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 - @njohnson533@AlecANL
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.and another example: codepen
I hope to help you.