Slider size adjustments to retain responsiveness

Discussion in 'Harrington- A WordPress Business Theme.' started by marketingtypeguys, Mar 9, 2016.

  1. marketingtypeguys

    marketingtypeguys Member

    Joined:
    Apr 15, 2014
    Messages:
    79
    Likes Received:
    1
    Hello -

    I added the following css to adjust the slider size. I like the look on desktop but it ruins the responsiveness.

    .slider_container {
    background: url(images/slider-shadow.png) bottom center no-repeat;
    height: 430px;
    width: 1140px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    overflow: hidden;
    }
    .sy-slides-crop {
    height: 430px !important;
    }
    .sy-caption-wrap {
    left: 5%;
    width: 250px;
    }
    .sy-pager {
    left: 8.2%;
    }
    Can you please give me the code to correct the look on mobile?
    url is http://dee.c40.myftpupload.com/
    Thanks,
    Patty
     
  2. priya

    priya Guest

    Hello Patty,

    Greetings from InkThemes!

    Would you please try the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    @media only screen and (max-width: 767px){
    .sy-slide > a > img {
        margin: 0;
        width: 100%;
        height: 460px;
    }
    }
    @media only screen and (max-width: 480px){
    .sy-slide > a > img {
        margin: 0;
        width: 100%;
        height: 409px;
    }
    }
    Hope it will resolve your issue

    Do let me know if you need more assistance,

    Thanks & Regards!
    Priyanka
    InkThemes.com
     

Share This Page