QR Card sin necesidad de usar Flexbox ni Grid. [BEM]

Community feedback

• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  Marked as helpful

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hola 👋, te dejo esto por si quieres echarle un vistazo:

  HTML 🧱, ACCESIBILIDAD ⚖:

  🔹Esta es una imagen significativa y, por lo tanto, el texto alternativo debería dar una buena descripción en caso de que el usuario no pueda verla por algún motivo. Algo como 'Codigo QR para ir al sitio de Frontend Mentor' quizás.

  CSS🎨:

  🔹El contenido de la página se puede centrar usando Grid o Flexbox. Por ejemplo de la siguiente manera:

  body {
       min-height: 100vh;
       display: grid;
       place-content: center;
  }
  

  🔹El card debería tener un max-width que coincida con el diseño provisto para la versión de escritorio. Y la altura quedará definida por el contenido, no debería ser necesario establecerla.

  🔹Las unidades de longitud como los píxeles pueden no ser la mejor alternativa porque los tamaños de pantalla y las preferencias del usuario varían, y las unidades absolutas no se escalan. Lo digo principalmente por el font-size porque ya veo que utilizaste rem en otras propiedades 👍.

  🔹No necesitas usar font-weight ya que 700 es el valor predeterminado para la fuente negrita.

  🔹Media queries: No tienes que repetir todo el código sino sólo que aquello que cambie en la versión desktop respecto a la versión móvil. Y el primer media query parecería innecesario.

  Avísame si no está de acuerdo con algo o si deseas obtener más información sobre cualquiera de estos temas.

  Y si tienes alguna pregunta, estoy aquí para responder, así que no lo dudes. 🙂

  Saludos

  Marked as helpful

  0

  ---

  

  Axel Soto•160

  @axlsotoPosted over 1 year ago

  @fernandolapaz Muchísimas gracias por todas las recomendaciones, sé que aún cometo errores en cuanto a la semántica de mis códigos pero me he dado cuenta de que cada vez son menos. Seguiré aprendiendo de mis errores en los siguientes proyectos que continúe haciendo.

  0