Shape 5

Joomla Templates => Swapps - Club => : hanpaver October 14, 2016, 12:52:14 PM



: Image & content slider-mobile problem
: hanpaver October 14, 2016, 12:52:14 PM
I have an image & content slider on my site. 1 slide (slide 3) has an image in the text section. It does not show on mobile devices. Is there a way that I can fix this? Thanks.

ventloc.hanoverpavers.com


: Re: Image & content slider-mobile problem
: jonahh October 17, 2016, 11:29:00 AM
Hello,

I believe if you remove the following line from your s5_responsive.css file this should do it:

:
.slideInfoZone .right, .slideInfoZone_unload .right {
display:none; }


: Re: Image & content slider-mobile problem
: hanpaver October 19, 2016, 09:38:27 AM
I can now see it on mobile but the position & size is not how I would like it to be. I've tried changing the mobile code and nothing works. For mobile, I'd like it to be larger and centered. Any suggestions? Thanks.


: Re: Image & content slider-mobile problem
: jonahh October 19, 2016, 01:42:26 PM
Its showing centered for me. If you want to add a font size to make it larger you can below:

:
.jdGallery .slideInfoZone p

s5_responsive.css line 251


: Re: Image & content slider-mobile problem
: hanpaver October 19, 2016, 01:54:24 PM
I meant, the image on slide #3.


: Re: Image & content slider-mobile problem
: jonahh October 20, 2016, 12:40:14 PM
Oh ok, if you can turn up the slide rotation time to something like 900000 I can help you out with it. Its rotating too fast to firebug inspect it right now.


: Re: Image & content slider-mobile problem
: hanpaver October 20, 2016, 01:00:55 PM
I changed the rotation time. I also did a few other little changes that got it closer to what I want but not perfect on web or mobile.


: Re: Image & content slider-mobile problem
: jonahh October 24, 2016, 01:58:16 PM
Ok thanks, the following should center it on mobile. Open up your s5_responsive.css file and at line 310 change the CSS to the below:

.slideInfoZone .right, .slideInfoZone_unload .right {
    display: block !important;
    float: none;
    height: 200px !important;
    margin: 0 auto !important;
    width: 200px !important;
}