# Make Website Mobile Friendly - CSS Optimization | Bounty: 1000 INR

NayakPenguin commented 1 week ago

Description

Problem:

The current website is well-suited for laptops but collapses below 1100px for all pages except the landing page. Many pages use the same CSS classes, and these classes are not fully optimized for mobile or smaller screens.

To ensure a responsive and mobile-friendly experience across all pages, we need to collect all the CSS classes used throughout the website and adjust them accordingly to support screens smaller than 1100px.

Solution:

Identify CSS Classes:
- Go through the entire website (except the landing page) and collect all the CSS classes currently in use. These classes are generally shared across different pages.
CSS Refactoring:
- Make the necessary changes to ensure that the website adapts well to screen sizes below 1100px.
- Implement responsive CSS using media queries to handle various breakpoints, especially for tablet and mobile devices.
- Focus on optimizing layout, text size, spacing, and overall usability on smaller screens.
Testing:
- Ensure that after CSS changes, the site is responsive on mobile, tablet, and laptop screen sizes.
- The layout should not break or collapse below 1100px for all pages other than the landing page.

Requirements:

This task is CSS intensive, so please attempt it only if you have good experience with CSS and responsive design.
You must have a solid understanding of media queries, flexible grid systems, and modern CSS practices for mobile-first design.

Bounty:

Upon successful completion and merging of your pull request, you will receive a bounty of 2000 INR as a token of appreciation for your work.

Open to Contributors: If you are up for a CSS challenge and have experience in making websites responsive, this is the perfect issue for you! Please comment below if you’d like to take this on or need any further details.

Good luck and happy coding! 🎨🖥️📱

MichalT106 commented 1 week ago

@NayakPenguin @AayushSaini101 Hi can you assign me? I would like to work on this issue.

mukulpythondev commented 1 week ago

@NayakPenguin @AayushSaini101 I have started work on it I will raise the pr in afternoon, can you assign to me.

MichalT106 commented 1 week ago

@mukulpythondev Can you please let me work on it? I need it to collage.

Maheshwari-Love commented 1 week ago

@NayakPenguin @AayushSaini101 @mukulpythondev can please assign me this task...will try to complete it within 2 days...

Nabanita29 commented 1 week ago

Hey! I'd love to take on this task @NayakPenguin @AayushSaini101. I have a good grasp of CSS and responsive design, and I’m confident I can make the site more flexible for smaller screens. My approach would be!

First, analyze each page’s structure, mapping out how existing CSS rules are affecting responsiveness and identifying areas where styles are breaking.
Group similar classes to reduce redundancy and ensure styles are consistent across all screen sizes.
Add fluid layouts and use percentage-based widths where possible to improve adaptability on different devices.
Implement breakpoints with careful attention to element proportions and spacing, ensuring no overlaps or breaks on smaller screens.
Conduct cross-browser testing and performance checks to ensure smooth transitions and usability without compromising load time.

This approach will not only fix the current issues but also improve the code’s maintainability for future updates. Let me know if this works!

TenzDelek commented 1 week ago

Hello @NayakPenguin, Came from @AayushSaini101 post on LinkedIn. this issue seems to be responsiveness one and more with css. I have been strongly contributing to such things (frontend) to org such as nodejs and asyncapi and I would love to contribute here as well. Kindly assign this issue and will start working on it right away

alphaninja27 commented 1 week ago

Hey, this seems like a minor issue wont take much time, would be happy to help.

NayakPenguin commented 6 days ago

Hello everyone, thank you for your interest in this issue. 🚀

If you haven't already, please share a brief proposal outlining your approach to resolving it.

We will be assigning this issue within the next 18 hours and expect it to be resolved within 5 days of assignment; otherwise, it will be reassigned.

verma-divyanshu-git commented 6 days ago

@NayakPenguin

Thanks for the chance to work on this issue.

My approach:

Begin with a quick CSS audit.
Identify Responsive Issues
Implement Responsive Styles (Mobile-First Adjustments, Media Queries, Flexible Layouts, Typography and Images)
Testing and Refinement
Finalize and Deliver

Will do it over the weekend and submit the PR on/before Monday. Can I get started?

khushalmajoka commented 6 days ago

s issue within the next 18 hours and expect it to be reso

Hi @NayakPenguin , Just went on exploring the issue and now resolving it by using the media queries. Below is one such example. I have spent a lot of time making MERN Projects but haven't contributed to much in the open-source, yeah last time I successfully made contributions in the hacktoberfest, contributing to various repos. So Yeah you can assign me this issue, if you think I am the one, I have spend my most of the day today on this only except that 2-4 hours of Dussera Celebration and done with the most but yes this is time taking. So yes thats what I want to say.

Otherwise, will be happy to pickup any other issue.

TenzDelek commented 6 days ago

@NayakPenguin , Below are the approach I would take to tackle this issue:

identify and collect all the necessary CSS classes need to be changed.
Implement and make changes in each pages prior to their CSS classes. for example in https://algolisted.com/open-source the need for grid layout as per the screen is needed (1 grid for mobile, 2 for md and etc).
test out each route whether all changes have been reflected
review with the admin regarding the changes.
finalize the issue. that would be my approach. max delivery day would be 4 day and fastest would be around 2 day from assign. thank you and looking forward to it

Maheshwari-Love commented 6 days ago

Hi, @NayakPenguin

I have thoroughly gone through the website and also found the areas where most of the style are just needed to be modified with proper Layout and selection of Grid and FlexBox or either use of Media Queries... Here is my working Outlines below, this is how i will be going to resolve this issue of making the Website Mobile responsive...

Task Overview: To make the entire website responsive across mobile, tablet, and desktop devices.
Key Steps to Achieve Responsiveness: i. Analyze Current Layouts and Structure ii. Implement Responsive Design: For pages like /open-source, implement grid systems where: 1 column for mobile (max-width: 600px). 2 columns for tablets (min-width: 600px). 3 columns for desktops (min-width: 1024px).

iii. Update Navigation & Font Sizes:

Adjust the navigation bar to a hamburger menu on smaller screens.
Scale font sizes and content blocks for readability on mobile.
Ensure all images and videos are responsive using CSS rules like max-width: 100%.

iv. Test Responsiveness on All Pages:

Test every page across multiple screen sizes using browser dev tools and mobile emulators.

v. Review and Gather Feedback:

After the initial implementation, review the changes with the project admin.
Collect feedback, make necessary adjustments, and ensure the design aligns with their requirements.

I will be completing this task in a proper way by taking care of theme and design of website....I will be completing this within the time span...

NayakPenguin commented 6 days ago

@Maheshwari-Love has provided a well-explained technique for resolving this issue, and we will proceed with this approach for now. Excellent work, @Maheshwari-Love!

To the rest of the team, don't be discouraged—each proposal was impressive. This approach closely aligns with what we had in mind, and if the expected results aren’t achieved, we will consider reassigning the task.

Note :

In the meantime, feel free to explore other issues or report any bugs you find on the website. If they are significant, we're even open to offering a bounty for them. Keep up the great work, everyone!

AayushSaini101 commented 6 days ago

Good Luck @Maheshwari-Love

AayushSaini101 commented 3 days ago

@Maheshwari-Love Please create a draft PR

Maheshwari-Love commented 1 day ago

@Maheshwari-Love Please create a draft PR

Hi @AayushSaini101 @NayakPenguin I am glad to do this task and has almost completed the the styling work for the pages but the CSS for the pages while dark mode is on finding some issues...but due to mid-exam and submissions at college, I will need some more time so that I can manage both...I will be happy to give the whole task completed before 21-10-24. I request to please hold for a day.please let me know if other changes or something additional you want for the enhancement... Thankyou.

Algolisted-Org / AlgoListed