testimonials-grid-section with tailwind

Community feedback

• 

  Atatra•170

  @AtatraPosted 3 months ago

  And here I am, wondering what's your workflow to be able to make such pixel-perfect solutions?

  0

  ---

  

  mofada•340

  @mofadaPosted 3 months ago

  @Atatra I'm glad you approve of my solution, yes, I have my own solution. The situation is like this, the first two challenges will have free UI design, but there will be no UI in the later stages, which confuses me and the deviation will be significant. So I came up with a solution, and you can see this comment in my code:

  // design template develop use, set screen width 1440px and develop
  // if screen is mobile, set screen width 375px
  
  <picture>
      <source media="(min-width: 768px)" srcset="design/desktop-design.jpg"/>
      <source media="(max-width: 768px)" srcset="design/mobile-design.jpg"/>
      <img src="design/mobile-design.jpg"-->
          alt="background" class="w-full z-0 absolute top-0 md:bottom-0 md:h-[900px]"/>
  </picture>
  <button class="fixed right-5 top-5 text-white z-20" onclick="changOpacity()">Toggle</button>
  

  But later on, I found it quite troublesome to copy the code every time, and I also had to comment them in the HTML code. So, I improved them. You can see this file, I made it an external JS and imported it in.

  `

  1

  

  Atatra•170

  @AtatraPosted 3 months ago

  @mofada That's actually a very good idea! I never thought of that, thanks your detailed response. I also like how you put all your challenges related to FM in the same repo. I should definitely do the same, my github page would be way more organized that way. I'll probably have to switch to Github Pages too though.

  0

  

  mofada•340

  @mofadaPosted 3 months ago

  @Atatra It seems that a part of the recovery above has been lost, it's really strange.

  I'll add it again, maybe markdown have some problem.

  < script src="js/debug.js" defer ></ script >

  here is the debug.js source code debug.js

  Of course, there is another necessary step, which is to open the developer mode of the browser, switch to mobile mode, and adjust the size, if mobile design, you should set the width is 375。if desktop design, you should set the width is 1440， Of course, this width needs to be set according to the UI design provided by the challenge. Finally, don't forget to set your computer's zoom ratio to 100% for accurate pixel count.

  Here‘s a image can help you understand! image here

  By the way, you can create home page that add you all solution in this page, like this my home page

  1

  

  Atatra•170

  @AtatraPosted 3 months ago

  @mofada That's so cool! I love that home page. Thanks very helpful, I'll try it out on my next challenge :)

  1