Skip to content

Conversation

@mdnm18
Copy link

@mdnm18 mdnm18 commented Dec 1, 2025

📝 Summary

This PR addresses the responsiveness feedback discussed in Issue #1. It overhauls the layout logic for the Color Utilities, Components Gallery, and CSS Snippets pages to ensure they render correctly on mobile devices and utilize space effectively on large screens.

📱 Key Changes

1. Color Utilities Page (Fixes #1)

  • Problem: The grid was fixed to 2 columns, which looked stretched on desktops and cramped on small mobile screens.
  • Fix: Implemented a fully responsive grid using grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4.
  • Outcome: Cards now stack perfectly on mobile and expand beautifully on wide screens.

2. Components Gallery

  • Problem: Similar grid issues where the layout didn't adapt well to ultra-wide screens.
  • Fix: Added xl:grid-cols-4 breakpoint for better space utilization.
  • Cleanup: Fixed an unused variable (componentModules) linter warning.

3. CSS Snippets Hub

  • Problem: Long code blocks were causing horizontal overflow, breaking the mobile layout and making the page scroll horizontally.
  • Fix: Added overflow-x-auto and max-w-full to code containers.
  • Outcome: Code blocks now have a clean horizontal scrollbar (slider) on mobile without affecting the main page layout.

🛠️ Tech Stack

  • React
  • Tailwind CSS v4
  • Framer Motion

🔗 Related Issues


Tested on multiple breakpoints: Mobile (375px), Tablet (768px), and Desktop (1440px).

previous:
Screenshot 2025-12-01 at 4 35 57 PM
Screenshot 2025-12-01 at 4 36 13 PM

now:
Screenshot 2025-12-01 at 5 22 11 PM
Screenshot 2025-12-01 at 5 22 43 PM
Screenshot 2025-12-01 at 5 22 58 PM

@netlify
Copy link

netlify bot commented Dec 1, 2025

Deploy Preview for codemint ready!

Name Link
🔨 Latest commit e635aaf
🔍 Latest deploy log https://app.netlify.com/projects/codemint/deploys/692d835943096b0009883349
😎 Deploy Preview https://deploy-preview-86--codemint.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

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.

Colours Utility page not responsive to mobile device

1 participant