Skip to content
OverviewSolutions
4
Comments
2
P
Anthony Acosta M.
@874anthony

All comments

  • Jorge Muñoz•240
    @jlmunozfdevSubmitted over 2 years ago

    Todavía me cuesta trabajo manejar Flexbox, aunque no sé si lo he aplicado bien. La parte de media queries también estoy en duda. Y sí alguien quiere aportar con un comentario bienvenido sea.

    QR code component (Using FlexBox)

    2
    Anthony Acosta M.•100
    @874anthonyPosted over 2 years ago

    Hola, que tal? Felicitaciones por tu reto cumplido.

    Estuve viendo la parte que preguntabas en tu feedback, y me parece que manejas bien el flexbox. Alíneas y le cambias el alineamiento con el flex-direction, los cuales son usos comunes. Si quieres profundizar en Flexbox siempre tienes la (documentación oficial)[https://developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Flexbox]

    En respecto a los media-queries, veo que definiste:

    .div__card {
   width: 300px;
}

@media (min-width:962px){ 
    .div__card {
        width: 375px;
    }

    También me parece correcto, en el caso de que hayas tomado por un mobile-first design, primero haces el esquema para teléfonos móviles, y vas creciendo los elementos a medida que se haga más grande el ancho de la pantalla.

    No me queda más que felicitarte, sigue así!

    Marked as helpful
    0
  • Paul Toledo•60
    @PaulawlietSubmitted over 2 years ago

    Question 1: Is there any way to add rounded corners without adding a specific border radius on both divs (image and detail div)? because for the image I set: border-radius: 10px 0px 0px 10px; and for the details: border-radius: 0px 10px 10px 0px;, my question, is there other approach so that I can have rounded corners without designing each div?

    Product Preview Card Component using flexbox

    1
    Anthony Acosta M.•100
    @874anthonyPosted over 2 years ago

    Hi! To answer your question: no, it's not possible, since the image itself doesn't have a border-radius property set, it overflows as a default behavior, two quick solutions would be: exactly what you did (apply border-radius also to img) or

    .parent { overflow: hidden; }

    on the parent element.

    By the way, maybe for the future, if possible try to not mix pixels and rems, just stick to one relative unit, it will help you with responsiveness.

    Marked as helpful
    0