How to add a mobile device banner different to desktop banner

Site URL: https://quillfish-silver-hc63.squarespace.com/home

Hi there

I am wondering if I can add a different banner for my homepage as the current one works on desktop but the wording gets cut off on the mobile version?

I have added 2 banners one that suits each device - is there some CSS code to be able to hide the top one on mobile and hide the bottom one on desktop?

Thanks in advance

Hi,

This is possible. Your site is private. Can you setup password & share url? We can check easier

Hi @tuanphan

Thanks for your response - I have now made my website public so you can view it.

https://quillfish-silver-hc63.squarespace.com/

Let me know if an easy coding solution for the 2 different banners?

Thanks

Vanessa

On 5/3/2022 at 11:39 AM, vanbousfield said:

Hi @tuanphan

Thanks for your response - I have now made my website public so you can view it.

https://quillfish-silver-hc63.squarespace.com/

Let me know if an easy coding solution for the 2 different banners?

Thanks

Vanessa

To resize 2 top banners on mobile, add this to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage article section:nth-child(-n+2) {
    min-height: unset !important;
    height: 25vh;
    margin-top: 10vh;
}
}