Edit Slidershow JAMorgan

epaizc

Hi, I want to know is there a way to create a margin both sides of "slideshow" look image attach:
customer wants to pictures(slider) be smaller.

help me, thank you.

Ninja

epaizc
Hi
Add this code in custom.css file and set the value as per needs

.wrap.t3-slideshow {padding-left:20px; padding-right:20px;}

epaizc

Hi , is working good in desktop version, but in mobile version looks really bad, look attach image:

looks to shrink to much, I need image slide have margins both side in desktop version, in mobile version is ok it use all the width of the screen, please help me fix this.

Ninja

epaizc
Hi
If you want to apply the style only for PC use this code

@media(min-width:468px){
.wrap.t3-slideshow {padding-left:20px; padding-right:20px;}}

epaizc

is working now image have full width in mobile version but now the heigh is not correct, every image(slide) have diferent heigh, can you give me a code to mobile version slideshow have maxheigh for every slide please, look image attach doesnt looks good:

Ninja

epaizc
Hi
Use this code in custom.css file

@media(max-width:468px){
.owl-carousel .owl-item {
    max-height: 460px;
}}

epaizc

there is a problem, if I leave this code:
.owl-carousel .owl-item {
max-height: 624px;
} <-------------- slide looks good in desktop version, but if I delete this code and replace it with the one you are telling me

this one:

@media(max-width:468px){
.owl-carousel .owl-item {
max-height: 460px;
}} <--------- looks good in mobile have a max heigh, but desktop have again the problem with slide have diferent heighs, what can I do?

if you go to website now www.ticamexhn.com you will see slideshow in desktop looks bad again and in mobile version looks good, but because I replace the code. please help me

Ninja

epaizc but if I delete this code and replace it with the one you are telling me

Hi
I have not said delete the previous code, you only need to add the last code and keep the older one.

epaizc

you are correct I leave the first code now slideshow looks good in desktop and mobile version , we almost done with this, please, one last thing, why in mobile version I look this weird simbols? can we change this for dots, or something else? looks really bad, look image attach: you can look the website in mobile version www.ticamexhn.com

Ninja

epaizc
Hi
You have add this code somewhere on site that making them so big

.acm-slideshow .owl-carousel .owl-dots > div {
    height: 60px;
}

epaizc

ok, I add this code to custom.css
.acm-slideshow .owl-carousel .owl-dots > div {
height: 10px;
}
and now the Dots in the slide in mobile version looks good look image attach:

how can we use your code and only affect mobile version? 

but now in desktop version the bottom of the slideshow looks bad to shrink look:

Ninja

epaizc
Use media query to apply code for mobile

@media(max-width:468px){ .acm-slideshow .owl-carousel .owl-dots > div {
height: 10px;
}}

epaizc

Is working perfect, one last thing, can you tell me how to add a small space between the slideshow and the picture down the slideshow? like a padding or margin between the slideshow and the picture down in the mobile version (desktopversion looks good). look image attach:

Ninja

epaizc
Use this code

@media(max-width:468px){ .t3-slideshow{ padding-bottom: 10px;}}

epaizc

Perfect my friend, we finish here, I appreciate your time, website looks really nice, you can close this post.