Skip to content

Add Responsive Breakpoints for Multiple Device Sizes#66

Open
CodeByStella wants to merge 1 commit intogbowne1:masterfrom
CodeByStella:fix-issue-3
Open

Add Responsive Breakpoints for Multiple Device Sizes#66
CodeByStella wants to merge 1 commit intogbowne1:masterfrom
CodeByStella:fix-issue-3

Conversation

@CodeByStella
Copy link
Contributor

@CodeByStella CodeByStella commented Jan 28, 2026

Summary

This PR adds comprehensive responsive breakpoints to ensure optimal viewing experience across phones, tablets, laptops, and desktop displays. The implementation is based on screensizemap.com reference data with high popularity filter applied.

Changes Made

Responsive Breakpoints Added

  1. 360px width (phones) - Any height

    • Single column layout for small mobile devices
    • Optimized padding and spacing for mobile viewing

  2. 1360-1366px (laptops) - Standard laptop screens

    • 3-column stream grid layout
    • Container max-width: 1320px

  3. 1586px (bigger laptops) - Larger laptop screens

    • 4-column stream grid layout
    • Container max-width: 1560px

  4. 1920x1080 (Full HD desktop) - Full HD displays

    • 4-column stream grid layout
    • Container max-width: 1800px

  5. 1980x1200+ (large desktop) - Large desktop monitors

    • 5-column stream grid layout
    • Container max-width: 1900px

  6. Tablet sizes (601-1024px) - Based on screensizemap.com high popularity

    • Small tablets (601-800px): 2-column layout
    • Large tablets (801-1024px): 2-column layout

Implementation Details

File Modified

  • src/css/style.css - Added comprehensive responsive breakpoints section

Technical Approach

  • Mobile-first design: Styles progressively enhance for larger screens
  • Bootstrap compatibility: Works alongside existing Bootstrap 5 grid system
  • Flexbox overrides: Uses flexbox width overrides on .col elements for precise control
  • Container optimization: Adjusts container max-widths for optimal content display
  • Modal sizing: Optimizes stream detail modal sizes for each breakpoint

Grid Layout by Breakpoint

  • ≤360px: 1 column (phones)
  • 601-1024px: 2 columns (tablets)
  • 1360-1366px: 3 columns (laptops)
  • 1586-1919px: 4 columns (bigger laptops)
  • 1920-1979px: 4 columns (Full HD)
  • ≥1980px: 5 columns (large desktop)

Reference

Breakpoints were determined using screensizemap.com with high popularity filter to ensure coverage of the most commonly used device sizes.

Benefits

  • ✅ Optimal viewing experience across all device sizes
  • ✅ Better content density on larger screens (more columns)
  • ✅ Improved mobile experience with optimized spacing
  • ✅ Consistent design while maintaining Bootstrap compatibility
  • ✅ No breaking changes - all existing functionality preserved

Testing

The breakpoints have been implemented and are ready for testing on:

  • Mobile devices (360px width)
  • Tablets (601px, 768px, 1024px)
  • Laptops (1360px, 1366px, 1586px)
  • Desktops (1920x1080, 1980x1200)

Notes

  • All breakpoints are based on viewport width (more relevant than height for responsive design)
  • Dark mode and theme functionality remain intact
  • Breakpoints work additively with existing Bootstrap classes
  • Tablet sizes were determined from screensizemap.com high popularity data

Related: Implements responsive breakpoints as specified in the issue requirements.

@CodeByStella
feat: Add responsive breakpoints for multiple device sizes
2d26e99 
- Add breakpoint for 360px width phones (any height)
- Add breakpoints for laptops: 1360-1366px and 1586px
- Add breakpoints for desktops: 1920x1080 and 1980x1200
- Add tablet breakpoints (601-1024px) based on screensizemap.com high popularity data
- Optimize stream grid layout for each breakpoint (1-5 columns based on screen size)
- Adjust container widths and modal sizes for optimal viewing experience
- Maintain compatibility with Bootstrap 5 grid system

Breakpoints ensure optimal viewing experience across phones, tablets, laptops,
and desktop displays while preserving existing functionality.
@CodeByStella
Copy link
Contributor Author

CodeByStella commented Jan 28, 2026

#3

@CodeByStella CodeByStella mentioned this pull request Jan 28, 2026
Open
@gbowne1 gbowne1 added enhancement New feature or request help wanted Extra attention is needed good first issue Good for newcomers labels Jan 28, 2026
@gbowne1 gbowne1 linked an issue Jan 28, 2026 that may be closed by this pull request
[TODO] needs CSS media breakpoints #3
Open
gbowne1
gbowne1 approved these changes Jan 28, 2026
View reviewed changes
Copy link
Owner

@gbowne1 gbowne1 left a comment

Choose a reason for hiding this comment

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

@CodeByStella

I checked out this change locally for testing and review for merge.

This PR adds style changes for devices.

It appears to work fine in Firefox and Chrome/Chromium.

I couldn't find anything particular that overflowed or caused any particular style issues.

Approving this PR for merge pending further review by collaborators and other maintainers and contributors

Thanks for the opportunity to review your PR and for your contribution to this project. Please feel free to continue to contribute to this project and or any of my other projects at https://github.com/gbowne1/

@gbowne1 gbowne1 requested review from Ved178 and shishir-21 January 30, 2026 19:36
shishir-21
shishir-21 approved these changes Jan 31, 2026
View reviewed changes
Copy link
Collaborator

@shishir-21 shishir-21 left a comment

Choose a reason for hiding this comment

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

I’ve reviewed this PR and the responsive breakpoints implementation looks solid.

The CSS additions improve layout support across phones, tablets, laptops, and desktops, and they integrate well with the existing Bootstrap grid. I didn’t find any obvious layout issues on different screen sizes.

Screenshots and some documentation notes would be helpful in future updates, but overall, this is a clean and useful enhancement.

I approve this PR for merge.

@gbowne1
Copy link
Owner

gbowne1 commented Feb 2, 2026

@Ved178

Can you review this soon? I'll merge after some CI fixes and your PR for filename changes.

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

Reviewers

@gbowne1 gbowne1 gbowne1 approved these changes

@shishir-21 shishir-21 shishir-21 approved these changes

@EricKart EricKart Awaiting requested review from EricKart

@abhisheksingh1204 abhisheksingh1204 Awaiting requested review from abhisheksingh1204

@Mustansir-06 Mustansir-06 Awaiting requested review from Mustansir-06

@Ved178 Ved178 Awaiting requested review from Ved178

@glenjaysondmello glenjaysondmello Awaiting requested review from glenjaysondmello

Assignees

@CodeByStella CodeByStella

Labels

enhancement New feature or request good first issue Good for newcomers help wanted Extra attention is needed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[TODO] needs CSS media breakpoints

3 participants

@CodeByStella @gbowne1 @shishir-21