Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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



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


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 post
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

1 answer to this question

Recommended Posts

Create an account or sign in to comment

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

  • Create New...