Joomla Templates Club 406,261 posts

[dzidzuridza Friend dzidzuridzaJoin date: February 2011Posts: 76Downloads:11Uploads:12 Thanks: 49 Thanked: 3 times in 1 posts]

#665637

hi, hello,
On my side, http://www.silesiaequestrian.pl/PL on mobile (iphone) the slideshow look as follows: a large background there are tiny pictures. It is very readable, and looks bad. images have a size 1180/365
whether it is possible to improve it?
I have another idea: how to change slideshow on mobile version to the just one image in this same place . It is possible

Please help because I must master it and do not know how.

[dzidzuridza Friend dzidzuridzaJoin date: February 2011Posts: 76Downloads:11Uploads:12 Thanks: 49 Thanked: 3 times in 1 posts]

#665667

I find answer:

/* Slideshow */
.ja-slideshow .container {
padding: 0;
width: auto;
}
.ja-ss-btns .ja-ss-prev {
background-position: 0 0;
left: 20px !important;
}
.ja-ss-btns .ja-ss-next {
background-position: right 0;
right: 20px !important;
}
.ja-slideshow {
background: none !important;
} @media screen and (max-width: 1350px) {
.ja-slideshow .container {
padding-left: 0px !important;
padding-right: 0px !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: inline-block !important;
}
} @media (min-width: 768px) and (max-width: 938px) {
.hidden-sm {
display: inline-block !important;
}
} @media (min-width: 939px) and (max-width: 1279px) {
.hidden-md {
display: inline-block !important;
}
}

.ja-ss-item {
display: block;
float: left;
margin: 0;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
width: 100%;
min-height: 0px !important;
z-index: 1;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

[dzidzuridza Friend dzidzuridzaJoin date: February 2011Posts: 76Downloads:11Uploads:12 Thanks: 49 Thanked: 3 times in 1 posts]

#746651

I find answer:

/* Slideshow */
.ja-slideshow .container {
padding: 0;
width: auto;
}
.ja-ss-btns .ja-ss-prev {
background-position: 0 0;
left: 20px !important;
}
.ja-ss-btns .ja-ss-next {
background-position: right 0;
right: 20px !important;
}
.ja-slideshow {
background: none !important;
} @media screen and (max-width: 1350px) {
.ja-slideshow .container {
padding-left: 0px !important;
padding-right: 0px !important;
}
}
@media (max-width: 767px) {
.hidden-xs {
display: inline-block !important;
}
} @media (min-width: 768px) and (max-width: 938px) {
.hidden-sm {
display: inline-block !important;
}
} @media (min-width: 939px) and (max-width: 1279px) {
.hidden-md {
display: inline-block !important;
}
}

.ja-ss-item {
display: block;
float: left;
margin: 0;
overflow: hidden;
position: absolute;
right: 0;
left: 0;
width: 100%;
min-height: 0px !important;
z-index: 1;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

[Author]

Posts