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

Update Tailwind Config for Responsive Design #494

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

shivhere007
Copy link
Contributor

Description

This update enhances the user interface of the "DevDisplay" platform on tablet devices by aligning header elements and optimizing the light/dark mode toggle button for screens with a max-width of 768px and 1024px. These adjustments ensure a clean, centered header and an accessible toggle button, providing a seamless experience for tablet users.

Related Issues

Fixes #455

Changes Proposed

Custom Breakpoints Added: The md (medium) breakpoint has been set to 925px, allowing for a more tailored responsive design for medium-sized screens. The lg (large) breakpoint has been adjusted to 1100px, providing a better fit for larger screens while ensuring optimal layout and spacing. Other breakpoints remain unchanged at 640px for sm (small) and 1280px for xl (extra-large).

Checklist

  • I have read and followed the Contribution Guidelines.
  • All new and existing tests passed.
  • I have updated the documentation to reflect the changes I've made.
  • My code follows the code style of this project.
  • The title of my pull request is a short description of the requested changes.

Screenshots

After :

Screenshot 2024-10-28 121107
Screenshot 2024-10-28 121139

Before :

Screenshot 2024-10-28 122108
Screenshot 2024-10-28 122132

Note to reviewers

Kindly review this and merge it @codeaashu , @ishap11 , @madhukalita .

Copy link

vercel bot commented Oct 29, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
devdisplay ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 29, 2024 1:11pm

Copy link

netlify bot commented Oct 29, 2024

Deploy Preview for devdisplay failed.

Name Link
🔨 Latest commit b8346ae
🔍 Latest deploy log https://app.netlify.com/sites/devdisplay/deploys/6720ded1d1f4d70008344376

@codeaashu
Copy link
Owner

Hi @shivhere007 , thanks for your interest in contributing to DevDisplay!

Before we proceed, please add you profile here and be sure to star the DevDisplay GitHub Repository. 🌟

💌 This is a mandatory step for all contributors. & It's is the first priority of contribution in DevDisplay 💌

🚀 We look forward to your contribution once these steps are completed. 🚀

Thanks 👍🏻

@codeaashu codeaashu self-requested a review October 29, 2024 16:21
@codeaashu codeaashu added hacktoberfest Label is used for Issues and pull request related to Hacktoberfest 2024 open source contribution. hacktoberfest2024 Label for tracking contributions and activities during Hacktoberfest 2024 gssoc24 Label is used for Issues and pull request related to GSSOC 2024 open source contribution. opensource Label is used for Issues and pull request related to all open source contribution. hacktoberfest-accepted Label is used for accept the pull request of contributer in Hacktoberfest 2024. gssoc-ext Label is used for Issues and pull request related to GSSOC 2024 open source contribution. level2 labels Oct 29, 2024
@shivhere007
Copy link
Contributor Author

@codeaashu I have already added my profile and also starred the repo, kindly proceed further.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
gssoc24 Label is used for Issues and pull request related to GSSOC 2024 open source contribution. gssoc-ext Label is used for Issues and pull request related to GSSOC 2024 open source contribution. hacktoberfest Label is used for Issues and pull request related to Hacktoberfest 2024 open source contribution. hacktoberfest2024 Label for tracking contributions and activities during Hacktoberfest 2024 hacktoberfest-accepted Label is used for accept the pull request of contributer in Hacktoberfest 2024. level2 opensource Label is used for Issues and pull request related to all open source contribution.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[style]: Responsive Header and Toggle Button Adjustment for Tablet View
2 participants