Submitted over 1 year ago

Responsive Single Price Grid Component using CSS Grid and Next.js

Ahsan Raza•60

@AhsanCommits

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

🔧 Challenges Faced:

While building the project, I encountered some difficulties.

❗ Responsive Design: Ensuring the responsiveness of the component across different screen sizes posed a challenge. It required careful planning and implementation of media queries to achieve an optimal layout on various devices.

📚 Best Practices:

I don't have any specific questions at the moment, but I'm always eager to learn and follow best practices in web development. Staying up-to-date with the latest industry standards is important to me.

I would greatly appreciate your feedback on the project.

✨ How would you rate the overall design and user experience of the component? ✅ Did the component meet the required functionality and user requirements? 🔄 Were there any areas that could be improved or enhanced? 💡 Do you have any suggestions or ideas for future iterations of the component? 📚 Were the provided resources helpful in understanding and implementing certain concepts? 🆕 Are there any additional features or functionalities you would like to see added to the component?

Your feedback will be invaluable in improving and refining the project. Thank you for taking the time to share your thoughts!

Community feedback

Arne•1,110
@DudeldupsPosted over 1 year ago
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
1
Ahsan Raza•60
@AhsanCommitsPosted over 1 year ago
@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! 😊
0
Arne•1,110
@DudeldupsPosted over 1 year ago
@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
1
Ahsan Raza•60
@AhsanCommitsPosted over 1 year ago
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
1

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord