Joomla Templates Club 406,261 posts

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#183903

How can I hide the slideshow for the Mobile view? I want to retain the slideshow in the other views.

It would be great if Joomlart were to provide a toggle in the layout panel for the slideshow as was done for Positions 1, 2 and 3, as shown below.

---

Attachments:

1. 

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#479499

The site is http://tinyurl.com/bs5ogkb. As you shrink the width, the slideshow remains visible at all times.

Even removing the gap between the slideshow and “Book Your Tee Time” would help, although the slideshow is bandwidth heavy and not really relevant to mobile device users.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#479824

Hi,

You can use media jquery to apply css rule to specific screen resolution of different devices.

Open file: templatesja_merocsscustom.css and add this css code:

@media (max-width: 767px) {
.ja-slideshow {
display: none;
}
}


you can change max-width to your appropriate screen resolution.

Hope this helps.

2 users say Thank You to Saguaros for this useful post

1. clrmedia
2. vicentebelmonte

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480220

Excellent idea. I cannot get the following code to work in custom.css unless I remove the @media component. Any idea as to what I am doing wrong?

@media (max-width: 480px){
.ja-ss-items,
.ja-ss-item .animate .curr .active {
display: none;
}
.ja-slideshow {
display: none;
}
}


[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#480234

The following works! Thank you Sagusros for pointing me in the right direction.

@media (min-width: 480px) {
.ja-ss-items,
.ja-ss-item .animate .curr .active {
display: none !important;
}
.ja-slideshow {
display: none !important;
}
}

[clrmedia Friend clrmediaJoin date: October 2007Posts: 102Downloads:18Uploads:8 Thanks: 17 Thanked: 11 times in 1 posts]

#483654

Sorry. Just looked at my code above, which should use max-width as Saguaros stated above.

@media (max-width: 490px) {
.ja-ss-items,
.ja-ss-item .animate .curr .active {
display: none !important;
}
.ja-slideshow {
display: none !important;
}
}


1 user says Thank You to clrmedia for this useful post

1. vicentebelmonte

[vicentebelmonte Friend vicentebelmonteJoin date: November 2007Posts: 24Downloads:0Uploads:8 Thanks: 12 Thanked: 2 times in 1 posts]

#488679

It works, Thanks a lot!!!

[Author]

Posts