Skip to content
Submitted over 3 years ago

Social Media status page with Themes

Pete•150
@petewk
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social media dashboard with theme switcher
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

This was a fun one to build, using a lot of bootstrap grids to sort out responsive layouts.

I struggled a bit with placement of some of the items, for example aligning the up and down figures on the smaller cards to the bottom right while staying inline with the numbers in the bottom left, I had to do this just by adding a right margin the to bottom left numbers which doesn't quite leave them in the right places. The same goes for the Theme toggle switch at the top of the page.

Also any suggestions on an efficient way to change the themes would be welcome, especially if there's a way to toggle a single class for the whole document to see the change? Overall the effect turned out fine, especially like the transition between the themese

Community feedback

  • Devisetti Teja•530
    @Teja54Posted over 3 years ago

    This comment was deleted over 3 years ago

    1
    Pete•150
    @petewkPosted over 3 years ago

    @Teja54 Thank you!

    0
  • Raymart Pamplona•16,100
    @pikapikamartPosted over 3 years ago

    Hey, great work on this one. Layout is good both in desktop and mobile. Resizes well when reaching the mobile view.

    Though as I resize it, I noticed at around 1200px going down. The 3rd and last bottom cards. The text gets wrapped and now the content is out of the container. You might want to check that one out.

    Regarding your query. To solve that issue, you can just add

    align-items: flex-end;
display: flex;
justify-content: space-between;

    on your small .div to make the text well separated without having to use margins. It is responsive in that state even when the cards gets smaller or wider.

    Overall, good work on this one, if you want another transition to the cards, you can check out my solution :> I used some other tricks on that^^

    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