Docs

[darwinstudios]

Hello,

Please take a look here: http://tinyurl.com/js4qux8

The background image looks fine on desktops and laptops and I was able to use CSS to display:none on .backstretch and add a different look for mobile phones, but I cannot figure out how to make the background adjust to properly display on an iPad. Can someone help me with this?

[Rahul]

Hey There,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 2000px){
     .home .x-content-band.bg-image {
          background-size: contain;
     }
}

Hope that helps.

[darwinstudios]

I tried that and it did not adjust the background image when resizing. Please take a look at the URL provided http://tinyurl.com/js4qux8. For reference, this is my complete custom CSS on that page, including your addition.

.entry-wrap {
display: block;
padding: 60px;
background-color: transparent;
border-radius: 4px;
box-shadow: none;
}
@media only screen and (max-width : 480px){
.entry-wrap{
display: block;
padding: 0px;
background-color: transparent;
border-radius: 4px;
box-shadow: none;
}
.x-container.width {
width: 100%;
}
.backstretch{
display:none;
}
}
@media (max-width: 2000px){
.home .x-content-band.bg-image {
background-size: contain;
}
}

[Friech]

Hi There,

Please add this code instead.

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
  	.backstretch img {
  		left: 0 !important;
  	}
}

Hope it helps, Cheers!

[darwinstudios]

This does not seem to do anything either. Does it change on your end when viewing on iPad?

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

Joao

[darwinstudios]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials, I’ve added the following code:

@media (min-width: 768px) and (max-width: 768px) {
  .backstretch img {
    left: -210px !important;
   }
}

@media (min-width: 1024px) and (max-width: 1024px) {
  .backstretch img {
    left: -108px !important;
   }
}

And this seems to have fixed the issue. Please clear your browser’s cache and reload the site.

Cheers!

[Author]

Posts