Jump to content

How to add a mobile device banner different to desktop banner

Recommended Posts

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

Edited by vanbousfield
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.