@Dudeldups
Posted
Hello šš¼ There are some issues with your design. On mobile devices, there is no space at the side and top/bottom of the card. Also the 'Sign up' text does not stay on one line, the word 'up' is forced to the next line.
One thing to keep in mind: Don't use width: 100vw
on any elements. This does not take a vertical scrollbar into account and your site ends up having a horizontal scroll bar.
Marked as helpful
@AhsanCommits
Posted
@Dudeldups Thank you for your feedback! š I have addressed the issues by decreasing the width to 95% and making changes to the 'Sign up' text. Please take another look and let me know if the adjustments have resolved the issues. Your feedback is greatly appreciated! š
@Dudeldups
Posted
@AhsanCommits I've never used CSS-in-JS before so I had a hard time figuring out what you're actually doing š
What I meant was that you should look over your globals.css
file. You are using 100vw there. Avoid using it at all, try to work only with 100%. Also, you should be using min-height: 100vh
this is less error-prone than using height
.
Another thing I just noticed is that the main container is way too wide for the media query. You also didn't go mobile-first. Try starting with the mobile view, this should be your "basic CSS" code. Then use media-queries, clamp(), min() / max() / minmax() and stuff to make the component responsive for when the viewport width gets bigger and bigger until you reach the point when the card has its max-width
š¤
Marked as helpful
@AhsanCommits
Posted
Dear @Dudeldups,
Thank you for your feedback! š I appreciate your clarification and suggestions.
To address the issues with the code, I will review the globals.css
file and replace 100vw
with 100%
. Additionally, I will update the container to use min-height: 100vh
for improved reliability. š ļø
I also understand the importance of adopting a mobile-first approach and progressively enhancing the code using media queries, clamp()
, min()
, max()
, minmax()
, and similar techniques to ensure a responsive design. š±š”
Thank you once again for your valuable input. If you have any further suggestions, please feel free to share.
Best regards, @AhsanCommits