Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Thumb Slider Not Responsive in phone revibe 1.9 sppagebuilder 3.1.2

Featured Lock Resolved Bug
I Have an issue with thumb slider in revibe 1.9 helix3 joomla 3.8.5 sp page builder 3.1.1

The thumb slider in revibe is not responsive on phone the image witch is in pano mode do not resize the it took two and a half screen for the image to show in height. On the 1.8 version (like in your demo witch is still on line) the image is partial but it height is in the half of the sreen and the title is visible witch took mine 2.5 screen height to arrive to the title. I try different custom css you suggest but the image is or sqeeze and distort but not solve the hieght issue.

Thank you for your help

Attachments (4)

  • IMG_6878.PNG
    IMG_6878.PNG 236.9 KB
  • IMG_6879.PNG
    IMG_6879.PNG 221.5 KB
  • IMG_6880.PNG
    IMG_6880.PNG 221.6 KB
  • IMG_6881.PNG
    IMG_6881.PNG 373.2 KB

8 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
ok let me check your domain URL first, without I am blind.

Paul Frankowski - Staff

More than a month ago #Permalink
Anyway, try this custom CSS:


@media screen and (max-width: 480px) {
.sppb-addon-thumb-gallery #slider.flexslider .slider-title-wrap .slider-title {
font-size: 30px;
letter-spacing: inherit;
margin-top: 0;}

.sppb-addon-thumb-gallery #slider.flexslider .slider-title-wrap .slider-sub-title {
letter-spacing: inherit;
font-size: 18px;}

.sppb-addon-thumb-gallery #slider.flexslider .slides > li .thumb-slider-bg {
height: 300px;}

.sppb-addon-thumb-gallery #slider .slides > li .thumb-slider-bg {
-webkit-background-size: cover;
background-size: cover;
background-position: 50% 50%;}
}

Daniel P. Bourdages

More than a month ago #Permalink
Hi Paul,
I send you the access for the site http://danielpaulbourdages.com/cmrm/ two days ago. and I try he code you provide it doesn't work.
I use revibe 1.9 helix3 joomla 3.8.5 sp page builder 3.1.1 but the Rivibe version 1.8 did response in phone

the thumb slider in revibe is not responsive on phone the image witch is in pano mode do not resize the whole image just a part of it on the left is visible.

I do create a new slider just for mobile and put smaller image it doesn't show the whole width only the left part of the image? I try to put the height in pixel smaller doesn't make any differrence

I try custom CSS as you suggest in an other post:

@media (max-width:640px) {
.sppb-addon-thumb-gallery #slider .slides > li .thumb-slider-bg {
background-size: 100% 100%;
max-height: 350px;
}
@media (max-width:380px) {
.sppb-addon-thumb-gallery #slider .slides > li .thumb-slider-bg {
max-height: 200px; }
the image is sqeeze in width not responsive

I try different custom code from Toufig


@media (max-width: 320px){
.sppb-addon-thumb-gallery #slider.flexslider .slides > li .thumb-slider-bg {
height: 120px;
}
.sppb-addon-thumb-gallery #slider .slides > li .thumb-slider-bg {
-webkit-background-size: cover;
background-size: contain;
background-position: center center;
min-height: 119px;
background-repeat: no-repeat;
}
}

it doesn't resize the image in the height
I try Custom code for the height of the image it's not responsive.
I saw in different post this problem appear with the update of revibe template and page builder as well.

where should I look for info

Thank you for resolving this issue

Daniel

Paul Frankowski - Staff

More than a month ago #Permalink
I think the best solution would be to create 2nd slider only for mobile view. As I did now.
So you can control more what elements from picture you want to show and how high is should be.

Paul Frankowski - Staff

More than a month ago #Permalink
I added 2nd row for mobile view only, there inside slider addon I uploaded smaller images + some custom CSS
iphone6plus.jpg


Remember to refresh iphone browser 3x to see difference

Attachments (1)

  • iphone6plus.jpg
    iphone6plus.jpg 184.7 KB

Paul Frankowski - Staff

More than a month ago #Permalink
Your custom CSS I moved into custom.css file.

Daniel P. Bourdages

More than a month ago #Permalink
Thank you Paul,

Everything is perfect now you put another Thumb Slider for mobile.
So I can delete the caroussel and caroussel pro I made for testing on mobile?
If yes, then it's resolve.

Thank you again
Daniel

zoomteufel

More than a month ago #Permalink
Can anybody tell me how to edit the height of the slider in general? If I edit the "slide height", nothing changes on desktop version!

Thanks a lot

Paul


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 119
Sifat

Sifat

Total Accepted Answers: 117
Toufiq

Toufiq

Total Accepted Answers: 54
Pavel

Pavel

Total Accepted Answers: 5
Peter Atkin

Peter Atkin

Total Accepted Answers: 2

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us