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

@Agus27111

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
beowulf1958 1,170

@beowulf1958

Posted

Congratulations on finishing this project! Your solution to the purple color on the image is quite unique; I have never seen anyone else use filter.

I noticed that your mobile style has the image on the bottom; the design called for the image to move to the top in mobile. I have a suggestion how you can fix this with just 2 lines of code: Inside the media query

        .images {
          grid-row-start: 1;
        }
        .text {
          justify-content: center;
          align-items: center;
          text-align: center;
          grid-row-start: 2;
        }

You already have the grid working, so just move the image to first position and text to second position! That is the beauty of the grid: you can move items around in your layout.

Hope this helps!

Marked as helpful

0

@Agus27111

Posted

@beowulf1958

Wow, thank you very much for the advice.

Yes, I've just entered this field so there are so many things I don't understand. I really appreciate your advice.

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