Resolved White Space Issue on Mobile Version #2
Conversation
There was a problem hiding this comment.
Hi @kahoragachau ,
Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!
Highlights
- Good job with the refactoring of the code and doing away with the whitespace
Required Changes ♻️
Check the comments under the review.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
src/components/Review.jsx
Outdated
| <div className="bg-[#ff7b3d] flex flex-col md:flex-row items-end mt-[10rem] rounded-lg shadow-lg p-8 relative w-[100%] h-[50vh]"> | ||
| <div className="bg-[#ff7b3d] flex flex-col md:flex-row items-end mt-[10rem] rounded-lg shadow-lg p-10 md:p-8 relative w-[100%] h-[70vh] md:h-[50vh"> | ||
| <div className="absolute md:relative w-full h-80 rounded-lg"> | ||
| <img | ||
| src="https://images.pexels.com/photos/958545/pexels-photo-958545.jpeg?auto=compress&cs=tinysrgb&w=1400" | ||
| alt="" | ||
| className="absolute w-[50%] h-full md:-top-20 md:top-0 -left-16 rounded-lg" | ||
| className="absolute w-[50%] h-full md:-top-[150px] top-5 -left md:-left-[150px] rounded-lg" | ||
| /> | ||
| </div> | ||
| <div className="w-[50%] flex flex-col gap-10 text-white absolute right-0 top-10 items-start"> | ||
| <h2 className="text-4xl w-[440px]"> | ||
| <div className="w-[50%] flex flex-col gap-10 text-white absolute right-0 top-10 md:right-[50px] md:top-[150px] items-start"> | ||
| <h2 className="text-2xl w-fit md:text-4xl md:w-[440px]"> | ||
| People who like to eat are always best food | ||
| </h2> | ||
| <p className="w-[440px]"> | ||
| <p className="w-fit md:-[440px]"> | ||
| In publishing and graphic design, Lorem ipsum is a placeholder | ||
| text commonly used to demonstrate the visual form of a document or | ||
| a typeface without relying on meaningful content. | ||
| </p> | ||
| <button className="border rounded-3xl border-white px-6 py-2 shadow-sm shadow-white hover:shadow-lg hover:shadow-white"> | ||
| <button className="border rounded-3xl border-white px-4 md:px-6 py-2 shadow-sm shadow-white hover:shadow-lg hover:shadow-white"> | ||
| Explore now | ||
| </button> | ||
| </div> |
There was a problem hiding this comment.
I've reviewed the code and overall it looks great! 👍 However, I noticed that in the section where we handle mobile responsiveness, the content layout should be adjusted to use flex-direction: column instead of flex-direction: row for smaller devices.
This change will ensure that the content flows vertically on mobile devices, providing a better user experience. Could you please make this adjustment? Let me know if you need any assistance or further clarification.
There was a problem hiding this comment.
Implemented request Changes, Review and give feedback
Description:
This pull request white space #1 problem on the mobile version of our website/application. After thorough investigation and implementation of responsive design adjustments, the layout now adapts seamlessly to various mobile devices, eliminating unnecessary white gaps and improving the overall user experience.
Image
Changes Made:
Reviewed the Tailwind Classes and rewrote them to fix the issue
Testing: