Archived topic
different display for laptop and mobile
1 reply · Started by Ruth on October 13, 2021
Hi - Website staging.karlsylvester.com created with SPlit template. The home page image displays really well on a mobile but on a laptop it is cropped too much. I have experimented with different amount of padding and if it display well on a laptop. not so great on a mobile. It is possible to have a different home hero for a mobile and for a laptopn? Or is there another solution?
Hi there,
do you want the whole image to be displayed if so we need make the Container Blocks aspect ratio match the background image.
First calculate the original images aspect ration ie. Height / Width * 100
In your example that is 1459 / 2560 * 100 = 56%
Now edit the Block Element container block with the background image, and in Spacing > Minimum Height set it to 56 VW
And set the Container Blocks vertical alignment to Center.
