Submitted over 2 years ago

Stats-Preview-Page

Joshua Covington•50

@jcovington16

A solution to the Stats preview card component challenge

Preview Code

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.

Code

Please log in to post a comment

Community feedback

fersrm•230

@fersrm

Posted over 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

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