Skip to content

Commit

Permalink
Change container query breakpoint for preview list
Browse files Browse the repository at this point in the history
Better accommodate latest iPhone devices.
  • Loading branch information
Chalarangelo committed Apr 15, 2024
1 parent f25e14b commit 16c5355
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion src/styles/components/_preview-list.scss
Expand Up @@ -141,7 +141,11 @@
// This means that if the item has too much space available, it will use it
// to display the image and the content side by side, instead of stacking
// them on top of each other.
@container preview (min-width: 25rem) {
// Note that the `23rem` is a little weird (was `25rem` originally), but it's
// adjusted to accommodate iPhone 15 Plus and Pro Max devices, which have a
// width of `430px` in portrait mode, thus rendering the layout with a little
// bit of extra horizontal spacing which looks a little off.
@container preview (min-width: 23rem) {
img {
// Sclae the image proportionally to the container's inline size.
width: 30cqi;
Expand Down

0 comments on commit 16c5355

Please sign in to comment.