search

JiyaGupta-cs / ShopNex

React Ecommerce App
https://shopnex.vercel.app
90 stars 189 forks source link

feat: Make Website Responsive #93

Open JiyaGupta-cs opened 7 months ago

JiyaGupta-cs commented 7 months ago

Issue Description

The website is currently not mobile-responsive

Sneha123-zudo commented 7 months ago

Please assign me this issue under JWOC '24

JiyaGupta-cs commented 7 months ago

@Sneha123-zudo Go ahead

SnehansuBehera commented 4 months ago

Hey @JiyaGupta-cs I am a contributor at GSSoC'24 , I observed the landing page , navbar, footer, collection section, offers section as well as the mail section is not at all responsive for small screen sizes. I want contribute to it and I will be active with this project , please assign me this issue.

JiyaGupta-cs commented 4 months ago

@SnehansuBehera Assigned But pls make sure you first describe the techstackk what you would be using and draft a proposal

SnehansuBehera commented 4 months ago

Subject: Proposal for Implementing Responsive Design in ShopNex website

Dear Jiya Gupta @JiyaGupta-cs ,

I hope this message finds you well. As we continue to enhance our web development practices, I wanted to propose a strategy for ensuring that our websites are fully responsive across various screen sizes. To achieve responsiveness in web design, there are two primary approaches we can consider: utilizing media queries in CSS or leveraging frameworks like Tailwind CSS. Let me outline the benefits and considerations for each approach:

  1. Media Queries in CSS: a. Media queries allow us to define different styles for different screen sizes by targeting specific viewport dimensions. b. However, implementing responsive designs solely with media queries might lead to more verbose CSS code and potentially longer development times as we fine-tune styles for each breakpoint.
  2. Tailwind CSS: a. Tailwind CSS is a utility-first CSS framework that provides a vast set of pre-defined utility classes for styling elements. b. It streamlines the process of creating responsive designs by offering responsive variants for utility classes. For instance, we can apply classes like sm:text-center or lg:flex to adjust styles based on screen sizes. c. Using Tailwind CSS can lead to faster development cycles as it reduces the need for writing custom CSS from scratch. The framework encourages a modular and consistent approach to styling. Ultimately, as it is your project, you will have the final say in determining which approach best suits the needs of the development. Your insights and guidance will be crucial in steering us in the right direction.

Looking forward to your feedback.

Warm regards,

Snehansu Behera Contributor | GSSOC’24

IshanAmrit28 commented 4 months ago

Hey @SnehansuBehera I am contributor in GSSOC'24. can you please assign me this issue. I will be using the Media Queries in CSS to make it responsive.

SnehansuBehera commented 4 months ago

@JiyaGupta-cs please add the labels like gssoc and level1, level2, level3 as per the guidlines of gssoc'24.

Taranpreet10451 commented 3 months ago

Can you please assign this to me.