Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix responsiveness of /members/ page on small screens #133

Open
garg3133 opened this issue Jan 18, 2024 · 3 comments · May be fixed by #134
Open

Fix responsiveness of /members/ page on small screens #133

garg3133 opened this issue Jan 18, 2024 · 3 comments · May be fixed by #134
Labels
good first issue Good for newcomers

Comments

@garg3133
Copy link
Member

The responsiveness of the input/select fields on the /members/ page (https://alumni.iiitdmj.ac.in/members/') breaks on small screens.

This is how the page looks on mobile screens:

image

Each input/select field above should instead be in a separate row and wide enough for users to be able to interact with them.
@garg3133 garg3133 added the good first issue Good for newcomers label Jan 18, 2024
@garg3133 garg3133 mentioned this issue Jan 18, 2024
Open
@Ritish134
Copy link

Ritish134 commented Jan 18, 2024 •
edited
Loading

Please have a look : @garg3133
small
large

@garg3133
Copy link
Member Author

Feel free to open a PR, it'll be easier to review that way.

For small screens, I think it'll be better if we put the search button in the next line and put the rest 5 search inputs inside an expandable div, with the title "More search options". It looks ugly to have that many search options stacked up one over another.

For large screens, I think it looks good the way it is right now (all inputs in the same line). It works well up till md breakpoint and starts breaking after that.

Ritish134 added a commit to Ritish134/alumni that referenced this issue Jan 18, 2024
@Ritish134
Fixed members page responsiveness on smaller screens
b0d922c 
Added more search options button at smaller screens which expands for the other five input fields. 
closes BitByte-TPC#133
@Ritish134 Ritish134 linked a pull request Jan 18, 2024 that will close this issue
Open
@Ritish134
Copy link

Now is it fine ?? @garg3133
small-final-1

small-final-2

large-final

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed members page responsiveness on smaller screens Ritish134/alumni
2 participants
@garg3133 @Ritish134