Mobile parallax

Hi there,

Just wondering how I can make my mobile site look better, the parallax does not work on mobile and looks very strange, is there a way to maybe disable background images on the mobile site or a way to make them fit better?

The website is http://jonnywilson.co.nz

Thanks for any help

Caleb

Hi Caleb,

I’ve just checking your site, and here is to fix the background image on your page:

  1. It’s better to have full display of your first background image instead of parallax because there is no content for those section. Here is the css code:
@media (max-width: 320px){
  #pg-11-1 > div {
    background-size: 100% 100% !important;
  }
}
  1. And you can have the parallax for the second background image, this css code will fix the display of the second background image:
@media (max-width: 320px){
  #pg-11-3 > div {
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
  }
}

don’t think this worked heres an image of the simple custom css

I see, you can try to change the media max-width to 780px then.
you can use this code:

@media (max-width: 780px){
  #pg-11-1 > div {
    background-size: 100% 100% !important;
  }
  #pg-11-3 > div {
    background-attachment: fixed !important;
    background-size: 100% 100% !important;
  }
}