Make the Website More Responsive (Small Devices to Large Devices)

[ajaynegi45]

Description: We need to improve the responsiveness of the Uttarakhand Culture website across various screen sizes, from small mobile devices to large desktop monitors. The goal is to ensure that the layout and elements adapt fluidly, providing an optimal user experience on all devices.

Task:

• Update CSS/HTML and, if needed, JavaScript/TypeScript to improve the responsiveness.
• Ensure that the website's design elements (text, images, buttons, etc.) adjust appropriately for all screen sizes.
• Test responsiveness on different devices: mobile, tablet, desktop, and large screens.
• Focus on optimizing page performance on mobile devices as well.

Deliverables:

• Screenshots/GIFs of the website on different screen sizes showing improved responsiveness.
• A list of changes made to improve responsiveness.
• Ensure there are no breaking changes or layout issues on any device.

Helpful Resources:

• Responsive Web Design Basics
• Media Queries

Technical Requirements:

• Follow the existing design and ensure it remains visually appealing.
• Use CSS Grid/Flexbox for layout adjustments.
• Ensure no horizontal scrolling or content overflow on smaller devices.
• Test responsiveness in various modern browsers.

Acceptance Criteria:

• The website should look and function well on screens as small as 320px and as large as 1440px+.
• No major layout issues, broken elements, or overflowing content on any screen size.

[uzefaqureshi06]

can you assign this to me I will do your work

[ajaynegi45]

can you assign this to me I will do your work

Hi @uzefaqureshi06,

Thank you for expressing your interest in working on the "Make the Website More Responsive (Small Devices to Large Devices)" issue. I'm delighted to inform you that I have assigned this issue to you. Your willingness to contribute to our project is much appreciated.

Feel free to start working, and if you have any questions or need assistance during the process, please don't hesitate to reach out.

[uzefaqureshi06]

@ajaynegi45 can you let me know if there is any screen width breakpoint which is not responsive

[ajaynegi45]

@ajaynegi45 can you let me know if there is any screen width breakpoint which is not responsive

I'm not sure about the specific screen width breakpoints that aren't responsive—you'll need to check that yourself. However, I do know that the section card image isn't responsive, so that might be a good place to start.