fix: mobile spacing for recommendation form labels (#2)

[KaleSujit9011]

Summary

On mobile screens below 640 px, the Experience Level label inside the
recommendation form was sitting too close to the input below it.
This happened because label elements are inline by default, which
causes margin-bottom to be ignored by the browser.
The fix adds display: block and margin-bottom: 8px to
.form-group label inside the existing @media (max-width: 640px)
block in static/style.css. This only affects mobile screens and leaves
desktop layout unchanged.

Related Issue

Closes #2

Type of Change

• Style — CSS or visual changes only

What Was Changed

File	Change made
static/style.css	Added display:block and margin-bottom:8px to .form-group label inside @media (max-width:640px)

How to Test

1. git checkout fix/mobile-spacing-form-labels
2. pip install -r requirements.txt
3. python app.py
4. Open http://127.0.0.1:5000/
5. Open DevTools
6. Set width to 375px — check 8px gap between Experience Level label and dropdown
7. Set width to 1280px — confirm desktop layout is same
8. python tests/test_basic.py

Test Results

27 passed, 0 failed out of 27 tests

Screenshots

Before :

After Change :

Self-Review Checklist

• I have read CONTRIBUTING.md
• Branch name: fix/mobile-spacing-form-labels
• python tests/test_basic.py — all tests pass
• flake8 --exclude=static,templates . - 0 errors
• No print() or console.log() statements added
• Did not modify files outside issue scope
• Tested at 375px (mobile) and 1280px (desktop)

Notes for Reviewer

The Python files show no errors from flake8.

[vercel]

@KaleSujit9011 is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[komalharshita]

Nice work identifying the root cause and keeping the fix scoped specifically to mobile screens. The solution is clean, minimal, and resolves the spacing issue without affecting desktop layouts.

Before merging, please sync your branch with the latest main branch and resolve the current merge conflict in static/style.css.

[KaleSujit9011]

Addressed the requested change and resolved the merge conflict in static/style.css.
All checks passing. Ready for review.

[komalharshita]

Thanks for the contribution and for resolving the merge conflicts.

However, this issue has already been fixed and merged through another PR with the same implementation approach. Since the functionality now already exists in the latest main branch, this PR would duplicate the same changes.

Because of that, this PR will be closed as a duplicate contribution. We still appreciate the effort you put into resolving the issue and updating the branch.

[komalharshita]

@KaleSujit9011 Please feel free to check out other open issues in the repository — there are several beginner and intermediate-friendly issues still available, especially in UI/UX improvements, accessibility, and feature enhancements. We’d love to see more contributions from you.