For some reason, on mobile devices the SPLITTER logo is hidden -- I suspect it's an error in how my tailwind code is handling the container as the screen size changes size (either the styling in the root or the main container in my App.jsx). When in development, I didn't catch this error because in the chrome browser when previewing responsive screen sizes (even at iPhone SE) the logo appears as intended. However, once I deployed my code and looked at it on my actual phone it's not in view. I'd really appreciate assistance in understanding what adjustments I could make to resolve this!
I can't think of anything in particular, I would say if anything -- I'd be curious to know if using a DOMContentLoaded event listener was indeed the correct way to ensure the API is called on each page load.
Given that it was my first time building from a Figma design, I'd be curious to learn from others at what strategies they've taken to best interpret these designs when writing their CSS and how accurately I styled it (I had trouble being able to determine the exact margins/padding within the container.
I think I got as close to the requirements as I could
What challenges did you encounter, and how did you overcome them?I think the biggest challenge was trying to understanding the guidelines
What specific areas of your project would you like help with?I would like some assistance with the responsiveness
Nice work! For the responsiveness, I would recommend replacing the body height with 100dvh and getting rid of the fixed width value. I believe setting the width value to a set amount is preventing the site from being responsive.
