Archived

This topic is now archived and is closed to further replies.

  • 0

feature slideshow banding on mobile devices


Question

Posted · Report post

Hi - anyone help me out here? I have feature sliders in the header of my site:

lizziethynne.co.uk

but when viewed on a mobile device (I'm looking on an iPhone) there's a grey, semi-transparent band across the slides.

Any idea how I get rid of this?

I attach my feature slideshow settings.

Thanks,

John

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

Yes sorry - i missed that - my apologies 

 

try this 

 

#feature_slider .fcontent .fcontent-pad{
  display:none;
  
}

Share this post


Link to post
Share on other sites

Posted · Report post

Hi John,

 

When you're trying to have WordPress scale the images for your slider, the aspect ratio may not be properly recognized by various browsers.  Resize your images in a graphics editor to the exact same size, then replace the existing ones, and set the features to a static, specific height in pixels.

 

While browsers such as Firefox, Chrome and Safari handle scaling of images very well, others, such as IE don't handle it at all well in regular computers.  In mobile devices, many of them have issues with scaling, so I don't recommend using it.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, Rob. Images are already cropped to exact dimensions of feature slideshow (or very close). When I set features to static, specific height they don't respond for smaller screens at all.

Share this post


Link to post
Share on other sites

Posted · Report post

hello aerta - have you resolved this? i have tried resizing this on various browsers and it seems to work http://d.pr/i/hK1A 

Share this post


Link to post
Share on other sites

Posted · Report post

The slideshow's responsiveness isn't the issue, Martin. Check a page on an iPhone, or resize to iPhone width and you'll see the semi-transparent band which appears across the image. It's this I'm trying to eradicate.

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Pefect! Thank you.
1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Great - glad that worked :) 

Share this post


Link to post
Share on other sites