Joomla Templates Club 406,261 posts

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#201435

hello, my template with slideshow is working well on tablets landscape and desktop.
But on smartphones there is a gap of aproximately 85px above the slideshow. How do I eliminate this white space?
here with 960px width it’s ok:

here white gap (width760px and less)

thanks for your help!

---

Attachments:

1. 
2. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#550074

Go to this File: /templates/ja_brisk/css/custom.css

Replace this code

.ja-slideshow .container {height:auto;border:1px solid #888;padding-top:0;}

with

@media (min-width: 700px) { .ja-slideshow .container {height:auto;border:1px solid #888;padding-top:0; margin-top:0px !important;} }
@media (max-width: 640px) { .ja-slideshow .container {height:auto;border:1px solid #888;padding-top:0; margin-top:76px !important;} }
@media (max-width: 500px) { .ja-slideshow .container {height:auto;border:1px solid #888;padding-top:0; margin-top:77px !important;} }

1 user says Thank You to chavan for this useful post

1. zoralina

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#550075

great, it works, thanks 🙂

[zoralina Friend zoralinaJoin date: September 2014Posts: 26Downloads:0Uploads:5 Thanks: 5]

#550077

unfortunatly, between 700 and 770px the slideshow disappears behind the header, look here:

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#550119

Go to custom.css

Replace this code

@media (min-width: 700px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:0px !important;} }
@media (max-width: 640px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:76px !important;} }
@media (max-width: 500px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:77px !important;} }

With

@media (min-width: 765px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:0px !important;} }
@media (max-width: 760px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:76px !important;} }
@media (max-width: 500px) { .ja-slideshow .container {height:auto;border:0px solid #888;padding-top:0; margin-top:77px !important;} }

1 user says Thank You to chavan for this useful post

1. zoralina

[Author]

Posts