Sydney Theme Slider Is Not Showing Full Images and Text on Mobile Devices

Hello!

After upgrading today to the latest version of WP, it is now not showing the full images and text on the header slider. The desktop version still looks great, but on the mobile devices, it cuts off the majority of the photos and will not show the header titles, subtitles, and call to action button.

The website is: www.longwallminingservices.com

Hi,

The slider on mobile has changed a bit in behavior. You would need to remove your custom code that targets it and sets a fixed height as it won’t be required anymore, the slider will scale itself to the size of the images.

Thank you! Can you please tell me the steps to do this and where this would be located?

Thank you.

Yep, @vlad @roman

Something went wrong. It is suddenly not showing the full header images on mobile like it did until yesterday - and I didn’t change any code. See how it looks now (only mobile version; desktop is perfect): tripletrad.com

How can I:

  1. Make the slider images fit the whole screen?
  2. Resize (reduce) the height of the top red logo area. It is too big :frowning:

Thank’s in advance, guys

Kind regards,

Eky Barradas

@vlad @roman Just like @ekybarradas, I prefer the sliders being full screen like in the previous, can you please inform us what should we do in order to get the sliders back as they were?
Thanks a lot.

@natashaeger: It’s in the custom CSS you’ve added to your site. You just need to delete every piece of code where you’re setting a height for the slider.

@ekybarradas and @answersun: we literally had dozens of requests from people to make the header slider shrink down on mobiles in order to stop the images from being cropped (which is what happens in full screen) and show them properly.
We’ll consider adding an option to go back to the original way in the next version.

@vlad, thank you for your reply. Is there a lot to change in order to get the full screen back? Can you give me the instructions if it’s not a lot of change? Otherwise I’ll wait for the new version. Best regards.

It’s not a whole lot to change but it involves more files and stuff. So it’s better to wait for the option to be available.

Yes this is a horrible feature, everyone likes how it was before it was perfect. Please fix this as soon as possible thanks =)

As I said, we had tons of requests to change it so people didn’t really like how it was before :slight_smile:
But yeah, in your particular case where you’re using just the slider on the homepage it’s not ideal. Next update will contain an option to switch back to the original mode, though the current one will remain as default.

@vlad, I deleted all custom coding and it is still not effecting how the photos and text look on mobile device homepage slider. It only negatively changed how it looks on the homepage.

What other steps should I try to get this to look right?

@vlad, is there a specific code that lets the entire image and text on homepage slider be viewed on mobile device? This is what I have now:

@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center;
background-size: 100%;
}

It looks better WITH IT on the homepage, but it does not effect the mobile device view one way or the other. With and without the code, it looks the exact same.

@natashaeger: There are 2 problems here.

  1. you’re customizing the slider in a way that just won’t work with how it’s supposed to function. Remove the code again please and refresh your page to get rid of cache. You can keep the last block if you want as it has no effect on mobile.
  2. your image resolutions are just too far apart from each other to produce any decent results. I suggest you upload images of similar or identical sizes.

The update is trying to do on mobile more or less what you’re trying to do with those custom height declarations you have in your code. So please follow 1) and 2) and everything will work as it’s intended to work.

Everything worked! Thanks so much for your help @vlad!

In case anybody is interested, with today’s release you can go to Customize > Header Area > Header slider > last option and revert back to the old slider behavior on mobiles.

AMAZING, @vlad !!!

Thank’s!

FYI

Every time there is an update, my live chat code (zendesk chat) simply disappears from the theme header code :frowning:

Kind regards,

Eky Barradas

Of course, if you add it directly in the theme files it will be overridden upon update. That’s how WP works. Consider using a child theme.

Thank’s, @vlad

Now using a child theme! Great support!

Kind regards,

Eky Barradas
@ekybarradas