Viewing 8 replies - 1 through 8 (of 8 total)
  • Hi Rev,

    Looks like your theme is adding a drop shadow to the images, try adding the following CSS to override this:

    .metaslider .slides img {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    Thanks,
    Dave

    Thread Starter Rev

    (@revish-1)

    Hallo Dave,

    Thank u for your reply.

    I`ve already added the CSS, but with no luck.
    Ive used the same CSS as another website that ive made this week and there is no shadow on that website.

    https://www.warungsiero.nl is the website i`ve made this week.

    Greets,

    Rev

    Thread Starter Rev

    (@revish-1)

    This are all the codes with “metaslider”

    }
    /* Styles for Metaslider Prebuilt */
    .metaslider .msHtmlOverlay .layer .siteorigin-slider-action-button {
    display: inline-block;
    padding: 8px 46px 8px 0;
    font-weight: bold;
    background: url(slider/action.png) right center no-repeat;
    }
    .metaslider .msHtmlOverlay .layer .siteorigin-slider-action-button a {
    font-size: 16px;
    color: #FFFFFF;
    text-decoration: none;
    }
    #metaslider-demo .content,
    .vantage-slide-with-image .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    }
    #metaslider-demo .content img,
    .vantage-slide-with-image .content img {
    max-width: 100%;
    height: auto;
    }
    #metaslider-demo .msDefaultImage,
    .vantage-slide-with-image .msDefaultImage {
    max-width: 100%;
    height: auto;
    }
    /* =Widgets
    ————

    Hi Rev,

    The CSS that is adding the drop shadow is:

    .entry-content img {
    max-width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    }

    Line 1363:
    https://www.kamio.nl/wp-content/themes/vantage/style.css?ver=2.2.3

    The following code (provided earlier) should override this for Meta Slider:
    .metaslider .slides img {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    I can’t see that it’s been added – did you remove it?

    If added the Meta Slider CSS doesn’t work then you could remove the three style attributes from the theme CSS, but please note that this will remove this shadow styling from all applicable images across the site (whereas the Meta Slider override will remove the shadow from just the slider images):

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    box-shadow: 0 1px 2px rgba(0,0,0,0.175);

    Thanks,
    Dave

    Thread Starter Rev

    (@revish-1)

    Hallo Dave,

    I`ve have <strong>added</strong> the following code in the CSS:

    .metaslider .slides img {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }

    and had <strong>removed </strong>

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.175);
    box-shadow: 0 1px 2px rgba(0,0,0,0.175);

    but the shadow did NOT go away.

    I can`t find the problem.

    Thread Starter Rev

    (@revish-1)

    Sorry I mean , Matcha Labs instead of Dave

    Hi Rev,

    Looks good to me now – no shadow!

    Perhaps the site was being cached?

    Thanks,
    Dave

    Thread Starter Rev

    (@revish-1)

    Hallo Dave & Matcha Labs,

    Problem is solved indeed. I saw it just right away. Thank u all for the support!

    Greets from The Netherlands,

    Rev

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Shadow around metaslider [flexslider]’ is closed to new replies.