Skip to content

fix responsive UI overlap and skill tag overflow #403#440

Open
deveshchauhan1231-glitch wants to merge 1 commit into
komalharshita:mainfrom
deveshchauhan1231-glitch:fix/responsive-ui-403
Open

fix responsive UI overlap and skill tag overflow #403#440
deveshchauhan1231-glitch wants to merge 1 commit into
komalharshita:mainfrom
deveshchauhan1231-glitch:fix/responsive-ui-403

Conversation

@deveshchauhan1231-glitch
Copy link
Copy Markdown

@deveshchauhan1231-glitch deveshchauhan1231-glitch commented May 22, 2026

Summary [required]

This PR fixes responsive layout issues on smaller screen sizes. The stats cards were overlapping with the top section, and skill tags were overflowing outside their container. The layout and spacing were adjusted to improve responsiveness and maintain proper alignment across mobile and desktop views.

Related Issue [required]

Closes #403

Type of Change [required]

  • Bug fix — resolves a broken behaviour
  • Feature — adds new functionality
  • Data — adds new projects to data/projects.json
  • Documentation — updates docs, README, or code comments only
  • Style — CSS or visual changes only, no logic change
  • Refactor — restructures code without changing behaviour
  • Test — adds or updates tests

What Was Changed [required]

File Change made
static/style.css Adjusted responsive spacing, card layout, and overflow handling for skill tags
templates/index.html Updated structure/classes to improve responsive alignment

How to Test This PR [required]

  1. Clone this branch:
    git checkout fix/responsive-ui-403

  2. Install dependencies:
    pip install -r requirements.txt

  3. Run the app:
    python app.py

  4. Open the application in the browser.

  5. Resize the browser window or test using mobile view (375px width).

  6. Verify:

    • Stats cards no longer overlap with the top section
    • Skill tags stay within their container
    • Layout remains responsive on desktop and mobile

Test Results [required]

All tested views rendered correctly with no overlap or overflow issues observed.
<img width="1919" height="609" alt="image" src="https://github.com/user-attachments/assets/a4bc624e-7a44-44de-b43f-61b252598c89" />

@vercel
Copy link
Copy Markdown

vercel Bot commented May 22, 2026

@deveshchauhan1231-glitch 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.

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Responsive UI issue: overlapping stat cards and overflowing skill tags

1 participant