Hello all!
I’ve been setting up the website (Dawn OS 2.0) for our little startup but getting the image banner to display coherently across different devices/resolutions is a pain. (mobile, 4K, desktop/1080p)
I have no education in CSS and would be grateful for the support of this community.
Here are 2 possible solutions for my frustration with the banner,
1)Use a square image (with black background) and use CSS code to add padding in black colour on the sides to accommodate widescreen ratios. (desktop & 4K)
2)Use the solution from Separate banner images on mobile & desktop and add a code to display the first/desktop image without cropping. (instead of the inbuilt “adapt aspect ratio to 1st image” feature)
But the mobile photo will be displayed as-is.
Or, display both the images in their original aspect ratio. (i.e. desktop image/1st banner will be shown in its original aspect ratio & mobile image/2nd image will be shown in its original aspect ratio)
Thank you so much!