Joomla Templates Club 406,261 posts

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1067974

The slideshow disappear in mobile device. How to enable it ?

[timtecsa Friend timtecsaJoin date: October 2009Posts: 1382Downloads:86Uploads:327 Thanks: 197 Thanked: 132 times in 34 posts]

#1067997

Take a look to see if it is turned OFF in layout for extra small screen.

Tim

---

Attachments:

1. 

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1068014

Hi
Kindly apply the suggestion as shared by Tim in last post.
Here is documentation for how to show or hide and change position size of a module position in the template for different screen sizes.
Click on eye icon to hide the position in that view.
Regards

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1068140

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1068235

after i enable the slideshow, on the mobile device, the image looks cropped..not showing the whole image…..anyway to adjust it?
thanks a lot.

The image used as background as there is text and description on it. Also, ti does not fit well, this is why it was hidden.
If image using 100% width the text will not come over the bg image and it breaks the style.

Regards

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1069112

i can remove the text, as long as the image shows in 100% width on all devices.
any suggestion?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1069389

Hi
Add below code in custom.css file to hide slideshow content in mobile

@media(max-width:468px) { .block-slideshow-item.fade-style.active .slideshow-content {display:none;}}

Regards

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1069604

hi there, text is not show on the mobile device. but the image is not showing 100% width.
any solution?

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1069663

Hi
Add this code in custom.css file to make image 100% size

@media screen and (max-width: 767px)
{
.block-slideshow-item .block-bg {
    background-size: 100%;
}
.block-slideshow.full-screen {
    padding: 0;
    max-height: 300px;
}
}

Regards

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1069781

hi there,
i have put the coding you mentioned in custom.css. but the background image is still not showing in 100% width. can you check for me? thanks a lot

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1069896

Hi
Add !important in the code and it will work for sure
example:

@media screen and (max-width: 767px)
{
.block-slideshow-item .block-bg {
    background-size: 100%!important;
}}

Regards

[moody Friend moodyJoin date: April 2017Posts: 186Downloads:45Uploads:40 Thanks: 1 Thanked: 1 times in 1 posts]

#1070071

This reply has been marked as private.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#1070112

but on mobile device, there’s a gray color gap below the slide-show.
how to remove this gap?

Change the height value from the code i shared to set it for mobile.

Regards

[Author]

Posts