Skip to content
Submitted 6 months ago

Responsive Blog Card using CSS flexbox

Ramiro Damian Gimenez•120
@KraudKaiser
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Like last time, i used css queries for the responsive shrink and % for the width and sizes. I dont know if there is a efficient way to do responsive, but if exists, i dont know it. Please let me know in feedbacks

What challenges did you encounter, and how did you overcome them?

Responsive. Always is the responsive what makes me angry, its a battle i always tie but never win.

What specific areas of your project would you like help with?

KNOW HOW TO DO RESPONSIVE SO EASY PLEASE!

And also how to do the content never go out of container

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 6 months ago

    Hola Ramiro, felicidades por completar tu proyecto. Voy a escribir en español para intentar ayudarte de la mejor manera posible. Si algo sale mal, desde ya te pido disculpas.

    En cuanto a la responsividad, utilizas las @media para esa parte. Generalmente se ven así: @media (min-width: value), donde en lugar de "value" colocas el tamaño de la página que deseas que tenga efecto. Por ejemplo: @media (min-width: 1440px), Esta media solo tendrá efecto cuando la pantalla tenga al menos 1440px de ancho. También está @media (max-width: 1024px) que funciona de manera similar, con la diferencia de que el estilo se aplica hasta como máximo esa medida, es decir, pantallas iguales o mayores a 1024px no recibirán ese estilo.

    En cuanto a tu segunda pregunta, para evitar que el contenido se salga de sus contenedores, puedes aplicar width: auto; al contenedor, lo que adaptará su tamaño para que quepan los elementos internos. O puedes establecer un tamaño máximo para los elementos internos para que nunca crezcan más de lo normal.

    De nuevo, felicidades por tu proyecto, está muy bien hecho. Sigue practicando y mejorando. Si mi explicación no fue clara, por favor comenta abajo y trataré de ayudarte de la mejor manera posible.

    Marked as helpful
    0
    Ramiro Damian Gimenez•120
    @KraudKaiserPosted 6 months ago

    @R3ygoski Jaja te diste cuenta que soy hispanohablante. Tengo oxidado el ingles.

    Ahora veo un poco por que el Readme menciona un width para desktop y mobile, es para usarlo con los media queries asumo.

    Muchas gracias por las anotaciones

    1

Please log in to post a comment

Log in with GitHub

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