Much better, thanks so much!
Topic summary
A user’s banner image had excessive white space around it despite resizing in Canva. Enlarging the image increased the overall banner container size, which wasn’t desired.
Solution provided:
- Custom CSS code added to
base.cssfile - Uses media queries to handle different screen sizes
- For desktop (min-width: 500px): scales image to 149% width/height with vertical repositioning
- For mobile (max-width: 499px): scales to 120% width/height with slight upward shift
Outcome:
The CSS solution successfully filled the blank space without expanding the banner container. Before/after images were shared showing the improvement. The issue was resolved and the user confirmed it works well on mobile devices.
1 Like