Improve responsive image breakpoints for project list items images swipers #326

davidlj95 · 2024-03-10T11:21:18Z

davidlj95
Mar 10, 2024
Maintainer

Currently code indicates an image takes 33.3vw when on big screens (bigger than S breakpoint -> 960px). However, that's not entirely true given:

SCSS states swiper will take calc(100vw - 55ch). To allow text to take recommended size for lines to be readable. So images would take half of that. Which is almost 33.33vw. But not exactly that
SCSS states also that swiper won't exceed a certain height. So that the full image can be seen in screen. This is not taken into account when generating breakpoints for responsive images

So breakpoints are not exactly right. But good enough according to Lighthouse though 👍