1

I'm using Nivo Slider extension for Drupal (version 7.x 1.11) the page works fine, and Nivo resize itself without problem, but if width of the screen is less than 380px, it doesn't work.

I looking at the css code of nivo, but I did don't find where is the properties that change this. I would like to change this resize to get a good performance in displays with a width less than 380px (340px is good).

This is the css of nivo:

/*
 * jQuery Nivo Slider v3.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
    width:100%;
    max-width: 940px;
    margin: 0 auto;
    height:auto;
    overflow: hidden;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:10%;
    margin: 0 auto;
    width: 100%;
    max-width: 940px;
    max-height: 430px;
}


.nivo-main-image {
    display: block !important;
    position: relative !important; 
    margin: 0 auto;
    width: 100% !important;
    max-width: 940px;
    max-height: 430px;
    left: 10%;
    min-width: 100%; 
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
  }
.nivo-slice img {
    max-width: 940px;
    max-height: 430px;
    margin: 0 auto;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}

.nivo-box img { display:block;min-heigt:100px; }

/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    top: 10%;
    /*bottom:0px;
    background:#000;*/
    color:#fff;
    width:20%;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
@media (max-width: 600px) {
    .nivo-caption {
        top: 0;
        width: 50%;
    }
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
        text-align:center;
        padding: 15px 0;
}
.nivo-controlNav a {
        cursor:pointer;
}
.nivo-controlNav a.active {
        font-weight:bold;
}

Maybe could be a media query of the main css (the css of my template)? I getting a headache with this and I dont have more ideas...

I have added media querys, I'm setting min-height in a lot classes of my css, I was searching an specific media query... I'm pretty sure that this problem is in the css of Nivo, but I dont know where is or what remove or what add to my webpage.

The question is very similar to this other: https://stackoverflow.com/questions/21853803/make-division-image-responsive

But I don't have a slider-wrapper3 or something in my css.

Someone can help me?

closed as off-topic by Clive May 13 '16 at 7:36

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions on programming, PHP, SQL, etc. that do not relate directly to Drupal are off-topic here, but can be asked on Stack Overflow." – Clive
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Please ask CSS-only questions on Stack Overflow, we can't deal with them here. Thanks – Clive May 13 '16 at 7:36
  • If it does not work below a certain width, it is more likely to be a JavaScript problem than a CSS problem. (That would be also off-topic here, but it might give you a direction of where to look.) – Neograph734 May 13 '16 at 9:10
  • Yes, is a problem of CSS but is an extension of Drupal, this is a big problem because Nivo Slider has a lot of files and class and if you don't know where you need to change a parameter you cant solve the problem. I solve it changing two classes, "theme-bar.slider-wrapper" I added "overflow:visible" and the second one "slider" I added min-width 320px !important. – Leonardo Cavani May 17 '16 at 7:42

Browse other questions tagged or ask your own question.