Jump to content
aerta

feature slideshow banding on mobile devices

Recommended Posts

aerta    5
aerta
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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
aerta    5
aerta
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
greenfly    230
greenfly

Yes sorry - i missed that - my apologies 

 

try this 

 

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

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Great - glad that worked :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×