Optimizing mobile background responsiveness

Hi @freeknico,

Do you have a page where I can see what’s currently there? I can only see your holding page at present.

Thanks
Phil

Hi @freeknico,

It’s a bit tricky due to the aspect ratio of the image and what you want to do, and this is more of a stating point than a complete solution, but you’ll want to add some css along the following lines:

.age-gate-background {
  background-position: -385px center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 500px){
  .age-gate-background {
    background-position: -500px center;
    
  }   
}

@media screen and (min-width: 1024px){
  .age-gate-background {
    background-position: right center;
    
  }   
}

@media screen and (orientation: landscape) {
  .age-gate-background {
    background-position: center center;
    
  }  
}

@media (aspect-ratio: 1/1) {
  .age-gate-background {
    background-position: right center;
    
  }
}

You could combine the width and height in the queries to achieve better results, but you could finish up going on forever. These will probably work for most real world cases (phones/tablets/desktops etc).

I looks like you’re on the V2 beta so these can go into the CSS editor on the advanced tab.

Thanks
Phil