Support » Theme: Quality » Slider not responsive

  • Resolved wuselbart66


    First, thx for this great theme.
    Second, sorry for my bad english 🙂

    My problem is, that the slider will not show responsive on mobil devices.

    Tested with iPhone X and Huawei P20.

    Any tipps for me?

    Best greetings,


    The page I need help with: [log in to see the link]

Viewing 11 replies - 1 through 11 (of 11 total)
  • 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.


    Thread Starter wuselbart66


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

    Thread Starter wuselbart66


    Done! 🙂

    Hi wuselbart66,

    Glad to know it worked for you.

    We would really appreciate if you could provide us with a review here:

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



    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

    Best greetings,


    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..!


    Hi Shahid,

    It’s pretty better, thanks.

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



    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). 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, 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..!


Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Slider not responsive’ is closed to new replies.