Open mr-winter opened 8 years ago
tl;dr; images can indeed be big, this can be limited but we should also consider a max-width for the container, or decide of a screen resolution after which we don't care if the images get stretched. Thoughts @thibaudcolas, @claireynz?
Breakpoints are as follow, the grid has: 1 column
up to 650px
, 2 columns
up to 1023px
and 3 columns
after that.
With the margins, the max image width is 585px
for 1 column
; 420px
for 2 columns
, and more or less unlimited
for 3 columns
because it scales indefinitely (the container does not have a max size, only padding and each column takes 33%
).
Currently, images are constraint to 680px wide. This could be set to 585px
(max image width on mobile). For big screens, it means images will start to get stretched for resolutions over 2250px
wide, but this could be mitigated by setting a max-width on the container?
Breakpoints are as follow: image are full-width
up to 650px
and take up 66%
of the screen (with the text on the right) after that.
On smaller screen, the max image width is 561px
and again, more or less unlimited
after that.
Currently, images are constraint to 1200px wide. If we were to set it to 561px
(max image width on mobile), it means images will start to get stretched for resolutions over 1066px
which is not great. If we wanted to follow the same point as for the homepage (i.e. 2250px
), then the image would need to be 1225px
, which is more or less what it is already. Maybe we should set a max-width on the container?
Images are way too big https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fmadewithwagtail.org%2F&tab=desktop