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

Results summary

bacoder1 190

@bacoder1

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


My first time using tailwind!

This page does not work right with mobile.

Unfortunately, i didn't figure out how to make this responsive with tailwind, so, what is the best way to build responsive designs with tailwind ?

I also coded this desktop first, which probably made it harder.

Community feedback

Vahid 160

@i-am-vahid

Posted

Hello, I have checked your codes, Your design looks great on large screens. Tailwind is mobile first, so it is better to use this method to start coding, and also for the breakpoints in Tailwind, you can use Tailwind's own documents, I will give you the link to the breakpoints tailwind breakpoints

In fact, you start with the design of the mobile phone first, and then you fix the inconsistencies that arise by increasing the size of the screen. For example

<div class="grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4">
  <!-- ... -->
</div>
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