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

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

Question

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; 
  } 
}

 

Share this post


Link to post

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