Conversation
Introduced a media query for max-width 1200px to adjust layout and font sizes for various elements, improving display on smaller screens.
Changed .view height to 100vh instead of auto and removed overflow: visible in the media query for screens with max-width 1200px to improve layout consistency.
There was a problem hiding this comment.
Pull request overview
Adds a responsive breakpoint for screens up to 1200px wide to improve monitor layout readability and sizing on smaller devices.
Changes:
- Added a
@media (max-width: 1200px)block to adjust layout height and scale typography. - Reduced logo size within the breakpoint for better fit on narrower screens.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .view { | ||
| height: 100vh; | ||
| } |
There was a problem hiding this comment.
height: 100vh can behave unexpectedly on mobile browsers due to dynamic browser UI (address bar), causing content to be clipped or overflow. Consider using a dynamic viewport unit with a fallback (e.g., min-height: 100vh plus min-height: 100dvh, or height: 100dvh with a fallback) so the layout matches the visible viewport more reliably.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
| height: 100vh; | ||
| } | ||
| #logo img { | ||
| width: 90%; |
There was a problem hiding this comment.
Using width: 90% may upscale the image beyond its intrinsic size, potentially causing blurriness. If the intent is “scale down when needed,” prefer max-width: 90% (and keep height: auto) to avoid forced upscaling.
| width: 90%; | |
| max-width: 90%; |
| #clock { | ||
| font-size: 3.5em; | ||
| } | ||
| #date { | ||
| font-size: 1.25em; | ||
| } | ||
| .einsatzinfo h1 { | ||
| font-size: 1.2rem; | ||
| } | ||
| .einsatzinfo h3 { | ||
| font-size: 1rem; | ||
| } | ||
| .weather-data h1 { | ||
| font-size: 3rem; | ||
| } | ||
| .weather-data h3 { | ||
| font-size: 1.2rem; | ||
| } | ||
| .personal-box a { | ||
| font-size: 1.75em; | ||
| } |
There was a problem hiding this comment.
This breakpoint mixes em and rem for font sizing, which can make scaling harder to reason about (since em compounds with parent font sizes while rem does not). Consider standardizing on a single unit (commonly rem) or using clamp() for more predictable responsive typography.
There was a problem hiding this comment.
@copilot open a new pull request to apply changes based on this feedback
1 participant
This pull request introduces a responsive design improvement to the monitor display by adding a media query for screens with a maximum width of 1200px. The styles within this media query adjust the sizing of various elements to ensure better usability and readability on smaller screens.
Responsive design adjustments for smaller screens:
@media (max-width: 1200px)block tomonitor.cssto:.viewheight to100vh#clock,#date,.einsatzinfo h1,.einsatzinfo h3,.weather-data h1,.weather-data h3, and.personal-box a