Upgrade to Sydney Pro version 1.53 messed up home page slider on all devices

I manage a website on which I use the Sydney Pro theme/template. I just updated to version 1.53 and it messed up the home page slider. There are 3 images on the home page slider, and the way it is messed up varies depending upon the type of device and the page of the slider.

On the desktop/laptop, the same problem exists on all 3 images. The images on the background of each sliders appear twice. One copy of the image is smaller than the other, and overlaps the regular sized image.

On the tablet, on the first 2 pages of the slider, the image only covers up about ¾ of the page. The “click to begin” button covers up important parts of the images, but I can deal with that after the other issues are fixed. On the 3 page, the “click to begin” button does not appear at all.

On the mobile devices (smartphones), for the normal view the “click to begin button is bigger than I would like on pages 1 and 2. On page 3, the “click to begin button” is so low you can only see the very top of it. On the widescreen view (tipping the phone on its side) the “Click to begin” button is right smack in the middle of the important parts of the image on pages 1 and 2. On page 3, the “Click to begin” button appears, but it’s at the very bottom – again, not consistent with pages 1 and 2.

I have screenshots from 3 device types, the laptop, a tablet, and a smartphone. If you want to see screenshots, please let me know where to send them.

The site on which I did the upgrade is a development site, so there is directory privacy on it. So if you want to see it yourself, you will need the HTTP authentication ID and password. I will not send IDs and passwords via email. How can I securely send you the information.

Hello there,

Please clear your web browser’s cache and reload your site. If your site is being cached by a plugin like W3 Total Cache, please flush the cache.

FYI: this happened on one of our users (free version) as well. He shared his experience on how to figure it out. You can check his ticket in here.

Regards,
Kharis

Please read my entire message.

There are problems with the front page on tablet and smartphones devices that are different from the problem with the front page on laptop or desktop devices.

First of all, Some of us are quite well aware of the caches on the site and browsers. I cleared all the website page cache, the cache plug-in, and all of the browser caches on all devices SEVERAL times before writing in this support forum. It made no difference at all yesterday. Today, the desktop view looks OK, but the tablet and smartphone problems are exactly the same as I stated in my original message.

Just to reiterate:

On the tablet, on the first 2 pages of the slider, the image only covers up about ¾ of the page. The “click to begin” button covers up important parts of the images, but I can deal with that after the other issues are fixed. On the 3 page, the “click to begin” button does not appear at all.

On the mobile devices (smartphones), for the normal view the “click to begin button is bigger than I would like on pages 1 and 2. On page 3, the “click to begin button” is so low you can only see the very top of it (meaning the boarder - the words cannot be seen at all). On the widescreen view (tipping the phone on its side) the “Click to begin” button is right smack in the middle of the important parts of the image on pages 1 and 2. On page 3, the “Click to begin” button appears, but it’s at the very bottom – again, not consistent with pages 1 and 2.

I have screenshots but it doesn’t appear I can attach them to this message. If you want to see screenshots, please let me know where to send them.

The URL is dev.1800pettaxidenver.com, but you need credentials to see it because it has directory privacy since it’s the development version of the regular/production website.

Hello there,

I have screenshots but it doesn’t appear I can attach them to this message. If you want to see screenshots, please let me know where to send them.

To post an image here, you should use file hosting service like http://cloudup.com and then share its public link here.

Please email me the authentication username and password at kharisblank@gmail.com; mention the link to this thread.

Regards,
Kharis

I have installed the latest versions of Sydney pro on the live website. Even after the update to 1.54, the problems still exist on the tablet and mobile views, both regular and landscape have problems on both devices.

The website is https://1800pettaxidenver.com

Please let me know how to resolve the issues

Here are the screenshots

https://cloudup.com/cdcF_cPkvjl

Hello there,

Please try adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


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

   .header-slider .slide-inner {
      top: 0;
      bottom: 0;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); 
      min-height: 100%;
      max-height: 100%;
   }
   
}

@media only screen and (max-width:480px) {
   
   .text-slider .maintitle {
     font-size: 18px;
   }
   
   .text-slider .subtitle {
     font-size: 16px;  
   }  
      
}


Regards,
Kharis

I have the same problem, but just have the free version with the child theme I tried to put the custom CSS in but it didn’t help

Hi @ejkdesign,

Please share your site URL here, so I can check.

Regards,
Kharis

www.kinadesign.net

Hello there,

Your main slide looks fine on my phone as seen on the following screenshot. Have you been able to resolve the issue? Or, am I missing something? Could you please describe the exact issue you’re experiencing?

Cloudup

Regards,
Kharis

Hi Kharis,

Thank you for checking, I guess time heals all evil. I tried all the things mentioned but I still had a smaller picture within the picture but nothing seemed to help and then left it alone for 2 days and now it seems okay.

E

The CSS did not help at all on my website.

Do you have another solution for the problems with the slider on the website I am managing? The only slight improvement with the CSS you provided is the button “Click to Begin” is up a little bit on the tablet view on the 3rd slide. Otherwise, all the same issues I described above exist.

Update: The CSS has made the “Click to Begin” button WORSE on the mobile view. Now the button on the first 2 slides are so far down they can barely be seen and only the button on the 3rd page is where it should be. I’m going to remove the CSS as there are more problems with it than without it.

Hello there,

To use the older style of the main slider to behave like before updating, you’ll need to enable Full screen slider in the Appearance > Customize > Header area > Header Slider > Slider mobile behavior.

If you tend to use responsive slider, make sure your slide image size is larger. We’d recommend you use 1280px x 850px. Smaller image will lead unwanted space appears on the right side on particular screen width as seen like this:

Cloudup

Smaller image also leads another issue on the text slider visibility as the image gets scaled down depending on the device’s screen size. Ideally, your text should be short or you need a couple of extra CSS code to adjust its font size. Based on Kim’s case, the following CSS code is required and can be added into Appearance > Customize > Additional CSS.


@media only screen and (max-width:1025px) {
  
  .header-slider .mobile-slide {
    width: 100%;
    height: auto;
  }
  
}

@media only screen and (max-width:992px) {
  
  .header-slider .slide-inner {
      top: 0;
      bottom: auto;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0); 
      min-height: 100%;
      max-height: 100%;    
  }  
  
}

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

  .text-slider .maintitle { 
     font-size: 18px;
  } 
  
  .text-slider .subtitle { 
     font-size: 12px;
     line-height: 16px;
  }  
  
  .button-slider {
    font-size: 12px;
    line-height: 14px;
    padding: 10px 15px !important;
  }
  
}

Regards,
Kharis