Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Single price grid component

Eduardo 330

@Eduard38655

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I will appreciate any comment /-/ Agradeceré cualquier comentario

Community feedback

Denis 1,060

@Mod8124

Posted

👋Hola bien hecho!

Revisalo no es responsive para movil, y en pantallas grandes esta inclinado a la izquierda, y no esta aligneado en el centro esto pasa porque estas usando rem, el body siempre tiene que cubrir el total de la pantalla ya que es el principal

body {
width:100%;
height:100vh;
} 

tambien en tus css siempre empieza por mobile y terminas en desktop es mejor para confimar que tu web es responsive en los medias queries es mala practica volver a poner todas las propiedas de nuevo solo pon las que van a cambiar, tambien siempre usa px en los media queries para identificar mas rapido el dispositivo(mobile,table,etc)

body { // body en mobile
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
background-color: hsl(204, 43%, 93%);
font-size: 1.25rem;
}
@media screen and (min-width:600px) {
.body { // solo escribe la propiedad que cambia
font-size: 1.4rem;
}
}

🤟Espero te ayude, Buen codigo.

Marked as helpful

0

Eduardo 330

@Eduard38655

Posted

@Mod8124 Gracias por el comentario

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord