-
AuthorPosts
-
May 8, 2016 at 5:25 pm #628877
hi guys
i want to adjust the fullwidth slider for mobile devices so that the picture in the slider is higher and that there is enough space for caption and button
it doenst matter that then parts of the picture wont show and will be cut off on the sidesalso i want to change font color of the h2 caption inside the slider without changing the h2 for the whole website, what is the specifig css code for the slider captions?
see example and website in private content
thank you!
greetings
richard- This topic was modified 8 years, 7 months ago by richardhofer83.
May 10, 2016 at 11:37 am #629815Hey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 480px) { ul.avia-slideshow-inner { min-height: 210px !important; } .av_slideshow_full li, .av_slideshow_full .avia-slide-wrap, .av_slideshow_full li img { height: 100% !important; } }
Cheers!
JosueMay 10, 2016 at 1:41 pm #629895hi josue,
now the image is higher but its all distorted
i left the css code active so you can check it out with your mobile deviceimportant: i changed the passwort to the site so please check private content
May 10, 2016 at 1:53 pm #629902Try with this instead:
@media only screen and (max-width: 480px) { ul.avia-slideshow-inner { min-height: 210px !important; } .av_slideshow_full li, .av_slideshow_full .avia-slide-wrap { height: 100% !important; } .av_slideshow_full li img{ -webkit-transform: scale(4) } }
That won’t stretch the image but will scale it so it fills the height of the container (210px).
May 10, 2016 at 2:06 pm #629912ok its kind of working, the sliding motions is a bit weird (because the picture is bigger than the screen), can we fix that?
what is this part excactly doing?
.av_slideshow_full li img{ -webkit-transform: scale(4)
May 10, 2016 at 2:15 pm #629921Hm, try changing the slider animation to Fade, that part of the code scales the image up so it fills the whole height of the container (instead of stretching it).
May 10, 2016 at 4:50 pm #630085ok now with fade thats fixed
but now there is another problem, when you load the page the caption of the first slide show image is not properly shown, only the button but not the text above it.
but then when you tap left left to come to the same picture agaian, the caption is on the right placei tried some code with vertical align but couldnt fix it.
thank you
May 10, 2016 at 5:26 pm #630134Can you please disable the slider automatic rotation.
May 11, 2016 at 9:30 am #630536i did but i doesnt change this particular problem that the caption and the button get kinda stuck on top of the slider, when you load the page for the first time. it seems like the caption including button is loading in the “wrong” position
see screenshot in private- This reply was modified 8 years, 7 months ago by richardhofer83.
May 12, 2016 at 1:19 pm #631329Hi,
I noticed that you are using a caching plugin. Would you mind opening your plugin’s settings page and temporarily deactivate the caching of your site? Then please try to clear your browser cache and hard refresh the site (Hold CTRL + SHIFT + RELOAD) to see if that solves the issue.
Best regards,
AndyMay 12, 2016 at 1:38 pm #631344it was also like this before i activated the caching plugin, that the caption gets stuck outside the frame
cant i specify exactly where the caption on mobile devices should be (with like coordinates?)
is it working on your phone?
May 12, 2016 at 1:54 pm #631369Hi,
The reason i asked to disable auto-rotation was so i can debug the slider caption, would be easier if you could hand me a WordPress administrator account via private reply so i can test the slider settings as needed.
Regards,
Josue- This reply was modified 8 years, 7 months ago by Josue.
May 12, 2016 at 7:42 pm #631556ok sorry, here you go
i disabled auto rotation again- This reply was modified 8 years, 7 months ago by richardhofer83.
May 16, 2016 at 4:23 am #632658Hey!
We adjusted the css code a bit:
@media only screen and (max-width: 480px) { ul.avia-slideshow-inner { min-height: 210px !important; } .av_slideshow_full li, .av_slideshow_full .avia-slide-wrap { height: 100% !important; } .av_slideshow_full li img{ -webkit-transform: scale(7); transform: scale(7); } .responsive #top .slideshow_caption h2 { font-size: 14px !important; } #top .avia-slideshow-button { padding: 7px 11px; font-size: 11px; margin-top: 10px; } }
Regards,
IsmaelMay 19, 2016 at 1:28 pm #635153thank you
it still doesnt show the full caption text of the slider when you load the page on a mobile device (see image in private content)
ist it working on your mobile phone?if that way is not working, can you disable the animation of the text and the button? maybe that is the problem?
- This reply was modified 8 years, 7 months ago by richardhofer83.
May 21, 2016 at 3:46 am #636106Hi,
The animations should be supported on mobile browsers. What is your mobile device? Anyway, you can disable it with the following:
EDITED: Incorrect css code.
Best regards,
IsmaelMay 24, 2016 at 9:51 pm #637745ok that changes the animation of the slider when it flips the page
my device is iphone 4s and 5c i tried on both, same thing… safari browser
i dont know if i didnt describ my problem in the right way or if there is just no way to display the full width slider (with text and buttons) correctly on a mobile device
please please open the site on your mobile device and see the problem for you self
thanks
greetingsMay 27, 2016 at 3:54 am #639044Hey!
My bad. The code above was incorrect. Please try the following:
@media only screen and (max-width: 767px) { .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title { visibility: visible; -webkit-animation: none; animation: none; opacity: 1; -webkit-transform: translate(0,0) !important; transform: translate(0,0) !important; } }
That should disable the caption animation. If you want to hide the text and captions on mobile, please use the following:
@media only screen and (max-width: 767px) { .responsive #top .slideshow_caption { display: none !important; } }
Regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.