Featured Slider in Mobile mode
-
The featured slider when it is displayed in the mobile phone, it has this ugly black stip as the background of the pagers, how can I change it? Thank you guys so much!!!
The blog I need help with is: (visible only to logged in users)
-
Hi, see if this gets you what you are looking for. I’ve grabbed the color from the surrounding area, the brown-ish color. You can edit as desired.
.slider-control-paging { background-color: #843616; } -
Hi thesacredpath,
It works!!! Thank you so much!
But then I found another defects of the slider in mobile mode, so we you navigate between the slides, you will notice a white strip appears as compensation because the unequal size of each slide, so is there some magic CSS coding to get rid of it?
Thanks! -
Hi thesacredpath,
I just found out that the solution of changing the background color of the pagers is not a overall one, because it makes the fixed strip in the PC mode when you navigate between the slides. When I cancelled it, the strip disappears, so it there a way to get rid of the black strip in the mobile way without harming the PC mode?
Thanks -
If possible, I would suggest preparing the featured images so they are the same size, that way there aren’t any issues with different sized images in the slider. They can actually be different sizes, but the important part is to keep them the same ratio of width to height. I’ve checked the ratio of the slider area, and it appears that a size of 1.75 to 1 (width to height) would work best. As an example, if you have an image that is 2000px in width, you would divide that width by 1.75 to get the best height (2000 / 1.75 = 1142). Or, if you have an image that is 1000px in height, multiply that by 1.75 to get the best width. You can then crop the images in your image editing program to those dimensions.
-
Hi thesacredpath, thanks for the timely reply, I double checked the featured images, but I don’t think they are the reason, it’s because of the unequal length of the featured title: the longer title occupies more space than the shorter one and this generates a extra white strip when you navigate between the slides. Also the solution you kindly offered to change the background color of the pagers leaves a fixed color strip in the PC mode when navigating between the slides. I think maybe an opaque background would be the solution, however I’m just not that apt do realize my thoughts. Thanks
-
Hi, thanks for the clarifications. I had a bit of a time finding it. I see a white gap below the slider navigation arrows when in landscape mode on my iPhone 6s+. Is that the gap you are talking about? I don’t see it when in portrait mode as the arrangement of the posts below the slider are different.
If that is not the gap you are talking about, then can you take a screenshot of it and upload it to your media library or a file sharing service so I can take a look? Also, on what phone/os/browser are you seeing that whitespace?
-
Hi thesacredpath, the first pic in my media library is when I added your css coding of the background color of the pagers, it looks nice in the mobile mode, but then has this fixed strip in the PC mode, as pointed out in the screenshot.
the Second and third pics show the ugly white strip in the mobile mode, these screen shots are taken from my PC simulator, but my Iphone 5s has the same effect.
thanks!
-
Hmmm, that is strange. The only thing the code I gave you does is to change the color of that area. I looked at your site in my old iPhone 5s running 10.2.something and do not see what you show in your screenshots either in portrait or landscape mode. What version of iOS are you running?
-
- The topic ‘Featured Slider in Mobile mode’ is closed to new replies.
WordPress.com Forums 