Fix mobile responsiveness based on tasks listed.#39
Fix mobile responsiveness based on tasks listed.#39XanderRubio merged 1 commit intoBeforeIDieCode:mainfrom
Conversation
lefty93
commented
Aug 25, 2023
- The header of the Logo.gif and Github avatar arranged with flex-direction: column when the screen size is smaller than 640px.
- Adjust the text "An Open Source Project".
- The dummy images will not displayed in the background behind "An Open Source Project" when the screen size is smaller than 640px.
- Reformat contributors bid_image and avatar image
- The display text of the answer for "Before I Die" is arranged when the screen size is smaller than 640px.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Hi @lefty93, I hope you're well, I'm all settled back in after traveling and confirming that I will be reviewing today for merging. |
|
Great job, Chu! Your updates have greatly improved the responsiveness of our project. Adjusting the screen window and viewing on mobile is now much smoother and cleaner. These small changes make the project more user-friendly and appealing. I noticed that you added a state variable named "isMobile" and used the useEffect hook to add an event listener to the window object, which listens for the resize event. When triggered, the "handleSize" function updates the value of "isMobile" based on the width of the window. If the width is less than 768 pixels, "isMobile" is set to true, indicating that the application is being viewed on a mobile device. The useEffect hook also removes the event listener when the component unmounts. You have done an excellent job using the value of "isMobile" to conditionally render the BrickLayout component. If "isMobile" is true, the BrickLayout component is rendered; otherwise, it is not. Overall, your continual improvements to our UI interface are greatly appreciated. Keep up the great work, Chu! 👏🏻👏🏻Have a wonderful day! And please feel free to add open issues of your own that you see fit for improving the Before I Die Code Project. Merging now to close out issue #14 for mobile adaption and screen size change. |