Skip to content
Submitted almost 2 years ago

Stats-Preview-Page

Joshua Covington•50
@jcovington16
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • Making this site mobile responsive was the most difficult part while building this project. Also making sure that I could change the color/opacity of the picture.

  • I'm really am unsure of the structure of my project.

  • I want to know how I can switch the order of divs when working on the responsive design. I know divs are by default block elements and I was able to items side by side, but when trying to make it mobile responsive I wasn't able to switch the divs, nor change other elements.

Community feedback

  • fersrm•230
    @fersrmPosted almost 2 years ago

    hola lo mejor sería cambiar

    @media screen and (max-width: 853px) and (min-width: 451px)
.card {
    grid-template-columns: 1fr;
}
.left {
    padding: 1rem;
    order: 2;
}

    corriges también la otra media screen y deveria quedar bien y para el fondo en la imagen

    .right::before{
    background-color: hsla(277, 64%, 25%, 0.51);;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
}
    Marked as helpful
    0
    Joshua Covington•50
    @jcovington16Posted almost 2 years ago

    @fersrm Hola. Gracias por los comentarios. Voy a hacer algunos cambios y lo tendré en cuenta para el próximo problema que haga.

    0

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