AccessibleWebDev icon indicating copy to clipboard operation
AccessibleWebDev copied to clipboard

Enhance the UI of footer for the website

Open ArslanYM opened this issue 1 year ago • 11 comments

The footer of the website is not well designed , the github logo is too far left , other links are missing as well.

I would like to work on the footer section and make it better looking and responsive

fx

ArslanYM avatar May 01 '23 14:05 ArslanYM

Feel free to do a mock design before making any changes to the code so I can see the kind of improvements you'd like to make.

EmmaDawsonDev avatar May 01 '23 14:05 EmmaDawsonDev

Sure on it!

ArslanYM avatar May 01 '23 15:05 ArslanYM

@EmmaDawsonDev I can work on this if no one is working?

mud1tx avatar May 05 '23 14:05 mud1tx

I am working on this @mud1tx , will PR soon

ArslanYM avatar May 05 '23 14:05 ArslanYM

I would like to suggest this design for the footer.

  1. We will have 2 cols to group the links under the category. This will remain the same for small and large screen
  2. Copyright statement and social media links would be centre aligned below the links cols. This will stay the same for small and large screen

This design is responsive for small to large screens.

Screenshot 2023-05-25 at 11 46 34 PM

wyt @EmmaDawsonDev

Neha avatar May 25 '23 22:05 Neha

I really like how you’ve categorised them into 2 columns. I think this will work great on larger screens but it may need to become 1 column on mobile (the Contribute section could go under the About us section) so that it’s not too cramped.

EmmaDawsonDev avatar May 27 '23 13:05 EmmaDawsonDev

I really like how you’ve categorised them into 2 columns. I think this will work great on larger screens but it may need to become 1 column on mobile (the Contribute section could go under the About Us section) so that it’s not too cramped.

If we change the font size for mobile to 12px. This is how 2-cols will look Screenshot 2023-05-27 at 3 06 42 PM

Neha avatar May 27 '23 14:05 Neha

I think it looks to cluttered and I'd rather not go below a minimum font size of 0.875rem. I would rather go with one column only on mobile.

EmmaDawsonDev avatar Jun 04 '23 14:06 EmmaDawsonDev

@EmmaDawsonDev how about this, Yes details should be changed.

WhatsApp Image 2023-10-01 at 21 53 29_0d5be05d

SAGARSINGH-1 avatar Oct 02 '23 05:10 SAGARSINGH-1

@EmmaDawsonDev how about this, Yes details should be changed.

WhatsApp Image 2023-10-01 at 21 53 29_0d5be05d

How does it look on mobile?

EmmaDawsonDev avatar Oct 07 '23 14:10 EmmaDawsonDev

Not Designed yet. but here is some overview :

image

SAGARSINGH-1 avatar Oct 07 '23 15:10 SAGARSINGH-1