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
  • Views 689
  • Created
  • Last Reply

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.