Support » Theme: Quality » Slider not responsive

  • Resolved wuselbart66

    (@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,

    Tom

    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.

    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://wordpress.org/support/theme/quality/reviews/#new-post

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

    Thanks

    flemoing67

    (@flemoing67)

    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

    Shahid Mansuri

    (@shahidmansuri123)

    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

    flemoing67

    (@flemoing67)

    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.

    flemoing67

    (@flemoing67)

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

    Shahid Mansuri

    (@shahidmansuri123)

    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

    flemoing67

    (@flemoing67)

    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?

    Shahid Mansuri

    (@shahidmansuri123)

    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

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