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

Stats-Preview-Page

@jcovington16

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@fersrm

Posted

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

@jcovington16

Posted

@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
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