Mobile first using tailwind.css

Community feedback

• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Hi @Deor1496,

  Congratulations on getting this done.

  • This class w-2/3 is breaking the responsiveness on small screens. I can see the class translates to width: 66.66% which is not wide enough for mobile view. You can increase that to width: 90% => w-9/10.

  • On the background image, set background-size: 100vw 40h.

       background-image: url(./images/pattern-background-desktop.svg);
       min-height: 100vh;
       background-position: top center; // you dont need to set this
       background-repeat: no-repeat;
       background-size: 100vw 40vh;
    

  • Avoid setting solid heights, use min-height instead of height, i.e min-height: 100vh

  • For such a small project, I will recommend not using libraries. In fact, it can cause a lot of confusion.

  Hope this helps, happing coding!

  2

  ---

  

  Deyxon•10

  @Deor1496Posted over 3 years ago

  @jmnyarega Thanks for the feedback! i made the changes and it works great, next project i will try yo use vanilla css

  0
• 

  Hafizan Adli•1,190

  @hafizanadliPosted over 3 years ago

  Hello, I appreciate you try solving this with tailwindcss!

  For better look in mobile view, you can set w-screen(instead of w-2/3) and give mx to container element.

  And you can set icon-music image responsive by giving responsive image size.

  Using breakpoints variant (sm,md,lg,etc.) would be good for responsive design

  Great job!

  1

  ---

  

  Deyxon•10

  @Deor1496Posted over 3 years ago

  @hafizanadli Hi thanks for the feedback! I used the breakpoints to fix the margins on small devices, it worked great! thanks for the tip

  0