Skip to content
This repository has been archived by the owner on Feb 12, 2025. It is now read-only.

fix: Responsive Layout Enhancement for Quiz Container #927

Merged

Conversation

Sanjay-Sahu-Bandla
Copy link
Contributor

Summary of changes

The current layout of the quiz container, which displays the question, options, and submit button, utilizes the w-50 class for a 50% width. While this approach works well on larger screens, it presents usability challenges on mobile devices due to their limited screen real estate.

Implementation

  • Removed the w-50 class from the quiz container.
  • Added a media query targeting devices with screen widths less than 460px. Within this rule, the container's width is set to 100%, ensuring it occupies the full width of the mobile screen and improves user experience.

Attached full screenshot showing after changing the width to 100% in mobile devices

freeCodeCamp-Developer-Quiz-After

Checklist

  • I have read and followed the contribution guidelines.
  • I have read through the Code of Conduct and agree to abide by the rules.
  • This PR is for one of the available issues and is not a PR for an issue already assigned to someone else.
  • My PR title has a short descriptive name so the maintainers can get an idea of what the PR is about.
  • I have provided a summary of my changes.

closes #926

Copy link
Contributor

@jdwilkin4 jdwilkin4 left a comment

Choose a reason for hiding this comment

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

Congrats on your first contribution to our repository. 🎉
We look forward to future contributions. 👍

@jdwilkin4 jdwilkin4 merged commit 02ff9a3 into freeCodeCamp:main Dec 17, 2023
3 checks passed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] - Quiz Container Requires Responsive Design for Mobile Devices
2 participants