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.

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

Enhance Responsiveness: Adjust Button Layout for Small Screens #332

Closed
wants to merge 7 commits into from

Conversation

ahmedrazabaloch
Copy link
Contributor

Implement responsive styles for sorting buttons and task counter for improved mobile experience.

  • Updated .sort-buttons to use a column layout with increased spacing when the screen width is 420px or less.
  • Configured .button-container to center buttons horizontally while maintaining a consistent gap.
  • Adjusted .sort-button width to 40% for better visibility and accessibility on small screens.
  • Set .task-counter-button width to 90% and centered it using auto margins to ensure it fits comfortably within the container.

These changes aim to enhance usability and aesthetics on mobile devices, ensuring that buttons are easily accessible and well-aligned.

Before

screencapture-127-0-0-1-5500-Todo-html-2024-10-30-03_01_05

After

screencapture-127-0-0-1-5500-Todo-html-2024-10-30-03_14_28

Copy link
Collaborator

@Anshgrover23 Anshgrover23 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, Please address the comments below

Todo.html Show resolved Hide resolved
style.css Outdated Show resolved Hide resolved
style.css Show resolved Hide resolved
style.css Show resolved Hide resolved
@Anshgrover23
Copy link
Collaborator

@ahmedrazabaloch your one check is failing run npm run format

Copy link
Contributor Author

@ahmedrazabaloch ahmedrazabaloch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Anshgrover23 fixed kindly accept the PR

@ahmedrazabaloch ahmedrazabaloch closed this by deleting the head repository Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants