Problem with images pixelated in parallax seen on iphones

hi kharis, would you be so kind to have a look at my website using only the Smartphone? The website is www.fondazionesacco.it
There is a problem with the Sydney theme, in particular the parallax images are pixelated… It is the same problem I had with a previous update of the theme…

Hello there,

Sorry for inconvenience.

Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?


@media only screen and (max-width:1024px){
  
  .panel-row-style[data-hasbg="hasbg"]{
    background-attachment: scroll !important; 
  }
  
}

Let me know how it goes.

Regards,
Kharis

Hello Kharis,

Can I put it in the Appearance / Customization / Additional css panel?

Hi David,

Yes, you can.

Regards,
Kharis

I did it, but it gave no effect

Do you have other custom CSS code priors that one? Please ensure that it doesn’t contain any error. The easiest way to check is by using this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

It tells me that I do not have an error

@media only screen and (max-width:1024px) {

  .slide-item .slide-inner {
    top: 0 !important;
    -webkit-transform: translateY(40%);
    -moz-transform: translateY(40%);
    -ms-transform: translateY(40%);
    -o-transform: translateY(40%);
    transform: translateY(40%);  
  }
  
}

@media only screen and (max-width:991px) {

  .slide-item .slide-inner {
    -webkit-transform: translateY(30%);
    -moz-transform: translateY(30%);
    -ms-transform: translateY(30%);
    -o-transform: translateY(30%);
    transform: translateY(30%);  
  }
  
}

@media only screen and (max-width:767px) {

  .slide-item .slide-inner {
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);  
  }
  
}

@media only screen and (max-width:1024px){
  
  .panel-row-style[data-hasbg="hasbg"]{
    background-attachment: scroll !important; 
  }
  
}

Does your site have a cache plugin enabled? If so, please clear it and then reload your site.

Checkout this codex and see if you can figure it out yourself.

Regards,
Kharis

I do not know if it’s me … there is no change … do I have to add some command or a class to the images?