Joomla Templates Club 406,261 posts

[crescloud Friend crescloudJoin date: September 2013Posts: 20Downloads:52Uploads:10 Thanks: 4 Thanked: 1 times in 1 posts]

#196574

Hello 🙂

I need some help with an issue in my site. I just replace the video on the home page with a JA Slideshow, and make them responsive with this code that I saw in another thread of this forum:

.ja-ss-item.animate.curr.active > img {
width: 100%;
}
.ja-ss-item.ja-ss-item-ghost > img {
width: 100%;
}

Everything looks fine but when I look the site at low resolutions (for example; 1280×800), the transition of the slideshow looks something strange (like a type of jumping glitch), in the other side, in the same low resolution a grey space appears below the slideshow.

Any ideas how to fix these problems? :((

The site is http://server1.crescloud.mx/Eti1

Many thanks

---

Attachments:

1. 

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#530152

hi crescloud,

You can try to create custom.css file in templates css folder and add the following code:

.t3-video {
min-height: 0;
height: 100%;
}
@media (max-width: 1024px){
.t3-video {
min-height: 0;
height: 100%;
}
}

And i have seen that the content with the button of this box is overflowing in height on small window. So here i also have a solution for this, add this line BELOW the other custom text in custom.css

@media (max-width: 979px) and (min-width: 768px){
.ja-ss-wrap .ja-ss-desc {
top: 15%;
}
}

I think that works much better

Have a nice day!

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

#530156

<em>@crescloud 420634 wrote:</em><blockquote>Hello 🙂

I need some help with an issue in my site. I just replace the video on the home page with a JA Slideshow, and make them responsive with this code that I saw in another thread of this forum:

.ja-ss-item.animate.curr.active > img {
width: 100%;
}
.ja-ss-item.ja-ss-item-ghost > img {
width: 100%;
}

Everything looks fine but when I look the site at low resolutions (for example; 1280×800), the transition of the slideshow looks something strange (like a type of jumping glitch), in the other side, in the same low resolution a grey space appears below the slideshow.

Any ideas how to fix these problems? :((

The site is http://server1.crescloud.mx/Eti1

Many thanks</blockquote>

HI @crescloud
I just checked your site home page .
i did not found any gray line space there .
Did you solve the issue .?
See this >

---

Attachments:

1. 

[crescloud Friend crescloudJoin date: September 2013Posts: 20Downloads:52Uploads:10 Thanks: 4 Thanked: 1 times in 1 posts]

#530159

Thx for the answer @fmfame.

Well I follow the instructions and the gray bar is gone now, but the glitch on the slideshow persist.

<em>@pankajsharma 420780 wrote:</em><blockquote>HI @crescloud
I just checked your site home page .
i did not found any gray line space there .
Did you solve the issue .?
See this > </blockquote>

Hi @pankajsharma

Yes, thx to fmfame I could get rid of the grey line, the only issue that remains is that strange glitch with the transition effect of the slideshow at low resolutions :S

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#530272

Hi crescloud,
have you added my 3rd line?

The button on smaller window isnt showing look here:

If you add this code to custom.css
@media (min-width: 768px) and (max-width: 979px){
.ja-ss-wrap .ja-ss-desc {
top: 15%;
}
}

then you get this: (look at the content and the button)

and for the “glitch” you mean i think the following:

For the full-width showing, the picture has too low width. The slider will first load the original picture, then the css and php will stretch it, so that effects this.

Then, another solution is to enable joomla cache on plugins and in global configurations, i think its not activated yet.
In template settings: disable developer mode if enabled.

Problem is, if the cache is disabled, your browser always try to load the image as first time loading, that needs time and capacity. So if you have enabled cache, the images and few other things will be stored in your browser so maybe this problem is solved.

Try that

---

Attachments:

1. 
2. 

[crescloud Friend crescloudJoin date: September 2013Posts: 20Downloads:52Uploads:10 Thanks: 4 Thanked: 1 times in 1 posts]

#530369

Hi fmfame.

Yes I already add the 3rd line to the code, my custom css looks like this:

.ja-ss-item.animate.curr.active > img {
width: 100%;
}

.ja-ss-item.ja-ss-item-ghost > img {
width: 100%;
}

.t3-video {
min-height: 0;
height: 100%;
}

@media (max-width: 1024px){
.t3-video {
min-height: 0;
height: 100%;
}
}

@media (min-width: 768px) and (max-width: 979px){
.ja-ss-wrap .ja-ss-desc {
top: 15%;
}
}

.section.parallax {
padding-top: 60px;
}

But the button is still disappearing at certain sizes :s

For the image size issue, I take a look on the Global configuration settings and the dev mode was already disabled, I try by activating the cache option, but the result remained the same.

I’ll try using the other transition effects, maybe they look better than the fade effect, but at the end, I think that in fact is not really a big problem, by disabling the autoplay function I think that the strange effect on the slideshow looks less weird.

Anyway, thx for the answers.

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#530435

..it Looks like that the
“@media (min-width: 768px) and (max-width: 979px){
.ja-ss-wrap .ja-ss-desc {
top: 15%;
}
}”

is not working..

Can you give me admin details of your site please so i can check template.

and for the image size issue:
you have to enable the “cache” plugin in –>plugins.
Only to set in global configuration the cache “on” is not working.

The images need bigger width..

[crescloud Friend crescloudJoin date: September 2013Posts: 20Downloads:52Uploads:10 Thanks: 4 Thanked: 1 times in 1 posts]

#530572

I sent you a PM with the admin details to the site.

And for the image size issue, yes, I already activate the cache plugin, but I got the same result, for now I disable the plug in because if I leave it active, I cannot see new articles o changes on the pages of the site.

Thx for the support

[fmfame Friend fmfameJoin date: October 2013Posts: 228Downloads:4Uploads:39 Thanks: 8 Thanked: 25 times in 1 posts]

#530587

hi crescloud!

Have solved your viewing issue at lower browser width.. :):):)

have forgot to add .t3-module to the css of the ja-ss-wrap.

I added/changed the code in custom.css:
@media screen and (max-width: 979px)
.t3-module .ja-ss-wrap .ja-ss-desc {
top: 10%;
}

AND i also added the code for the width for big browser windows with much width:
@media screen and (min-width: 979px) {
.t3-module .ja-ss-wrap .ja-ss-desc {
top: 30%;
}
}

Now its perfect showing in all browser widths… 🙂

And for the fade bug its definitely the width of the images. If you have vector of this images, upload it in bigger dimension, i would say at a minimum of 1200px width then you havent the problem.

In Slideshow module you set the height and width to auto, so the slideshow module first loads the original image, then our css scale it bigger to 100%. So this is the cause of this effect..

Have a nice weekend..

[crescloud Friend crescloudJoin date: September 2013Posts: 20Downloads:52Uploads:10 Thanks: 4 Thanked: 1 times in 1 posts]

#530590

Just work perfect now!!, I’ll see to upload the images with higher dimension, many thx fmfame 🙂 🙂

[Author]

Posts