Slider not responsive

Hi wuselbart66,

Thanks for contacting us,

For this paste the following css code in custom css field (Theme Dashboard >> appearance >> customize >> header setting >> custom css field)

#slider-carousel .item { background-repeat: no-repeat; height: auto !important; }
#slider-carousel .item .container { padding-top: 46.50%; display: block; height: 0; }
@media (max-width: 992px) {
#slider-carousel.overlay-none .slider-caption { padding: 15px; }	
.slider-caption h1 { font-size: 2.438rem; margin: 0 0 25px; }
.slider-caption h1:after { width: 30px; height: 2px; margin-top: 5px; } 
.slider-caption h5 { font-size: 0.813rem; line-height: 1.3; margin: 0 0 5px; letter-spacing: 10px; }
.slider-caption p { font-size: 0.938rem; margin: 0px 0 25px; }
.slide-btn-sm { font-size: 0.875rem; padding: 9px 25px; min-width: auto; }
}
@media (max-width: 768px) {
#slider-carousel.overlay-none .slider-caption { padding: 10px; }	
.slider-caption h1 { font-size: 1.500rem; margin: 0 0 20px; } 
.slider-caption h5 { font-size: 0.750rem; letter-spacing: 6px; }
.slider-caption p { font-size: 0.750rem; margin: 0px 0 15px; }
.slide-btn-sm { font-size: 0.750rem; padding: 7px 18px; }
}
@media (max-width: 480px) {
#slider-carousel.overlay-none .slider-caption { padding: 7px; }	
.slider-caption h1 { font-size: 0.938rem; margin: 0 0 12px; } 
.slider-caption h1:after { width: 25px; } 
.slider-caption h5 { font-size: 0.500rem; letter-spacing: 3px; }
.slider-caption p { font-size: 0.550rem; margin: 0px 0 10px; }
.slide-btn-sm { font-size: 0.550rem; padding: 5px 15px; }
}

Any confusion lets me know.

Thanks

Works great!
THX for the good and fast support!
Great Job!
THX again!
Tom

Done! ??

Hi wuselbart66,

Glad to know it worked for you.

We would really appreciate if you could provide us with a review here:
https://www.ads-software.com/support/theme/quality/reviews/#new-post

If you have any more questions, feel free to ask again!

Thanks

Hi,

I had also a trouble with the alignement of captions in the responsive mode. Thanks to your css code, I’ve fixed it.

But now, the slider appears to small on my mobile and the captions are quite too small to be readable at first view (without expanding manually the image).

How can I have an image with a raised height ? And increase the size of the texts ?

There is enough space between the image and the list of my featured services.

My website is
https://francois-le-moing.com

Best greetings,

Fran?ois

Hi flemoing67,

Kindly paste the code given below in Custom CSS field (Theme Dashboard -> Appearance -> Customize -> Header settings -> Custom CSS).

@media only screen and (max-width: 767px) and (min-width: 100px) {
	.slider-caption {
		width: 80% !important;
		left: 10%;
	}
}
@media (max-width: 480px) {
	.owl-carousel .owl-stage-outer, body.home #slider-carousel .item {
		height: 230px !important;
	}
	.slider-caption h5 {
		font-size: 0.800rem !important;
		letter-spacing: 2px !important;
	}
	.slider-caption h1 {
		font-size: 1.250rem !important;
	}
	.slider-caption p {
		font-size: 0.9rem !important;
	}
}

Hope this will helps.

Let us know if it works..!

Thanks

Hi Shahid,

It’s pretty better, thanks.

Is it possible to increase a bit the space between the captions? Like:

FRANCOIS LE MOING

KNOWLEDGE…

I highlight…

and to erase the small blue line in between, while I don’t put a button text?
I may put a ‘Find out more’ one later.

I’d like this increase of space between the sliders captions for the website and tablet modes.

Hi flemoing67,

Yes sure we can do it for you, Please add the following CSS code in custom CSS field (Theme Dashboard -> Appearance -> Customize -> Header settings -> Custom CSS).

.slider-caption.center h1:after, 
.slider-caption.left h1:after, 
.slider-caption.right h1:after { 
	display: none; 
}
@media (min-width: 480px) {
.slider-caption h1, .slider-caption h5 {
    margin: 0 0 30px !important;
}
}

You can also manage between the space of slider caption as per the need.

Let us know if it works..!

Thanks

• This reply was modified 6 years ago by Shahid Mansuri.

Thanks, it ok !

Can you erase as well the blue ligne on the ‘Illuminator of Knowledge’ slider?

Besides, I face an issue on the Clients section of my home page. Shall I ask for help in another query?

Hi flemoing67

1. Yes, Do you want to erase the blue line of the ‘Illuminator of Knowledge’ so please add the below CSS code in the custom CSS field.

.slider-caption h1:after { display: none !important; }

2. For your second query, Please create a separate thread for this then we can better assist you.

Let us know if it works..!
—
Thanks