Jump to content

Index banner images displaying smaller on mobile + disabling parallax on mobile/ipad

Recommended Posts

Site URL: http://teamcjwip.squarespace.com

Hello, 

I'm trying to finish up the homepage design for my site but there's a couple custom css problems I'm running into. I currently have an index page displaying 2 banner images that parallax as you scroll. I would like to use custom css to make the banners show fully on mobile because they are currently being stretched as if there is a minimum height.. i would also like them to not use parallax on mobile.

I've tried the following code, which has stopped the images from parallaxing on mobile but the images are still stretched.


site - http://teamcjwip.squarespace.com

pass - jaglovers

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #mission-banner { display: none; } } 
@media only screen and (min-width: 781px) { #mission-banner-mobile { display: none; } }
@media only screen and (max-width: 780px) { 
  figure[style] { 
    transform: initial !important; 
  } 
}

 

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

You can try display none .Parallax-item, then use CSS to set background image for banner section

I did for some clients with this way 😂

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.