Slider size on mobile view

[Mochi09]

hello, I need help on my slider, I'm using Minic Slider, It looks fine in the website but I'm having problem on its view on mobile device . how and where I can resize it?

see picture bellow

 

heres my site

click here

Edited July 16, 2014 by Mochi09 (see edit history)

[Bill Dalton]

It will depend on your theme but in my Minic I would go to,

 

themes\YOUR-THEME-NAME\css\modules\minicslider\views\js\plugins\nivo-slider\nivo-slider.css

 

In that CSS file you'll see serveral screen sizes that look like this,

 

@media only screen and (min-width: 980px) and (max-width: 1199px) {

.nivo-caption { top:20%;}

}

 

You can change the values  and add more if you need.

Edited July 16, 2014 by Bill Dalton (see edit history)

[Mochi09]

 

It will depend on your theme but in my Minic I would go to,

 

themes\YOUR-THEME-NAME\css\modules\minicslider\views\js\plugins\nivo-slider\nivo-slider.css

 

In that CSS file you'll see serveral screen sizes that look like this,

 

@media only screen and (min-width: 980px) and (max-width: 1199px) {

.nivo-caption { top:20%;}

}

 

You can change the values  and add more if you need.

 

I dunno where in code I need to change because there so many "width" code there, 

here is the code inside btw,

 

/*

 * jQuery Nivo Slider v3.2

 * http://nivo.dev7studios.com

 *

 * Copyright 2012, Dev7studios

 * Free to use and abuse under the MIT license.

 * http://www.opensource.org/licenses/mit-license.php

 */

#minic_slider {

position:relative;

z-index:1;

float: left;

margin-top: 30px;

margin-left: 0;

height: 426px;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

/* The Nivo Slider styles */

.nivoSlider {

position:relative;

width:100%;

height:auto;

overflow: hidden;

}

.nivoSlider img {

position:absolute;

top:0px;

left:0px;

max-width: none;

}

.nivo-main-image {

display: block !important;

position: relative !important; 

width: 100% !important;

}

 

.nivo-caption h3 {

display: none;

}

 

/* 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;

background:white; 

filter:alpha(opacity=0); 

opacity:0;

}

/* The slices and boxes in the Slider */

.nivo-slice {

display:block;

position:absolute;

z-index:5;

height:100%;

top:0;

}

.nivo-box {

display:block;

position:absolute;

z-index:5;

overflow:hidden;

}

.nivo-box img { display:block; }

 

/* Caption styles */

.nivo-caption {

position:absolute;

left:0px;

bottom:0px;

background:#191919;

color:#fff;

width:100%;

z-index:8;

padding: 16px 17px;

overflow: hidden;

display: none;

}

.nivo-caption p {

margin:0;

font-style: normal;

}

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

}

 

/*

Skin Name: Nivo Slider Default Theme

Skin URI: http://nivo.dev7studios.com

Description: The default skin for the Nivo Slider.

Version: 1.3

Author: Gilbert Pellegrom

Author URI: http://dev7studios.com

Supports Thumbs: true

*/

 

.theme-default .nivoSlider {

position:relative;

}

.theme-default .nivoSlider img {

position:absolute;

top:0px;

left:0px;

display:none;

}

.theme-default .nivoSlider a {

border:0;

display:block;

}

 

.theme-default .nivo-controlNav {

    bottom: 3px;

    display: inline-block;

    position: absolute;

    right: 11px;

    text-align: center;

    z-index: 9;

}

.theme-default .nivo-controlNav a {

display:inline-block;

width:18px;

height:18px;

text-indent:-9999px;

border:0;

margin: 0 10px 0 0;

}

.theme-default .nivo-controlNav a.active,

.theme-default .nivo-controlNav a:hover {

background-position:0 bottom;

}

 

.theme-default .nivo-directionNav a {

display:block;

width:30px;

height:30px;

background:url(arrows.png) no-repeat;

text-indent:-9999px;

border:0;

opacity: 0;

-webkit-transition: all 200ms ease-in-out;

    -moz-transition: all 200ms ease-in-out;

    -o-transition: all 200ms ease-in-out;

    transition: all 200ms ease-in-out;

}

.theme-default:hover .nivo-directionNav a { opacity: 1; }

.theme-default a.nivo-nextNav {

background-position:-30px 0;

right:15px;

}

.theme-default a.nivo-prevNav {

left:15px;

}

 

.theme-default .nivo-caption {

    font-family: Helvetica, Arial, sans-serif;

}

.theme-default .nivo-caption a {

    color:#fff;

    border-bottom:1px dotted #fff;

}

.theme-default .nivo-caption a:hover {

    color:#fff;

}

 

.theme-default .nivo-controlNav.nivo-thumbs-enabled {

width: 100%;

}

.theme-default .nivo-controlNav.nivo-thumbs-enabled a {

width: auto;

height: auto;

background: none;

margin-bottom: 5px;

}

.theme-default .nivo-controlNav.nivo-thumbs-enabled a:hover,

.theme-default .nivo-controlNav.nivo-thumbs-enabled a.active{

webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.8);

box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.8);

}

.theme-default .nivo-controlNav.nivo-thumbs-enabled img {

display: block;

width: 120px;

height: auto;

}

[Bill Dalton]

Try adding this to the bottom of your file. Make sure you make a backup of the file.

@media only screen and (min-width: 980px) and (max-width: 1199px) {
	.nivo-caption { top:20%;}	
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
	.nivo-caption { top:12%;}
}
@media only screen and (max-width: 767px) {
	#minic_slider {
		float:none;
		width:100%;
		margin:0;	
	}
	.nivo-caption {
		top:15%;
	}
}
@media only screen and (max-width: 600px) {
	.nivo-caption h2 {
		font-size:30px;	
	}
	.nivo-caption h4 {
		font-size:20px;	
	}
	.nivo-caption {
		top:15%;
	}
}
@media only screen and (max-width: 480px) {
	.nivo-caption {
		top:30%;
		width:65%;
	}
	.nivo-caption p { display:none;}
	.theme-default .nivo-controlNav { bottom:15px;}
}

[Mochi09]

 

Try adding this to the bottom of your file. Make sure you make a backup of the file.

@media only screen and (min-width: 980px) and (max-width: 1199px) {
	.nivo-caption { top:20%;}	
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
	.nivo-caption { top:12%;}
}
@media only screen and (max-width: 767px) {
	#minic_slider {
		float:none;
		width:100%;
		margin:0;	
	}
	.nivo-caption {
		top:15%;
	}
}
@media only screen and (max-width: 600px) {
	.nivo-caption h2 {
		font-size:30px;	
	}
	.nivo-caption h4 {
		font-size:20px;	
	}
	.nivo-caption {
		top:15%;
	}
}
@media only screen and (max-width: 480px) {
	.nivo-caption {
		top:30%;
		width:65%;
	}
	.nivo-caption p { display:none;}
	.theme-default .nivo-controlNav { bottom:15px;}
}

tried it but nothing changed

[Bill Dalton]

You have one copy in your Module directory and one copy in your theme, hopefully you are working with the right copy,

/themes/theme700/css/modules/minicslider/views/js/plugins/nivo-slider/nivo-slider.css

 

If you rename the file and it breaks your slider then you know you have the right copy.

[Mochi09]

You have one copy in your Module directory and one copy in your theme, hopefully you are working with the right copy,

/themes/theme700/css/modules/minicslider/views/js/plugins/nivo-slider/nivo-slider.css

 

If you rename the file and it breaks your slider then you know you have the right copy.

ya I found the right file still dont work. i dunno if its because of the customcontent beside it that making this problem

[Bill Dalton]

No, that type of problem went away with using tables. To make sure you are using the file that is controlling the slider  ... rename the file and load the page. If it breaks the slider you'll at least know if this is the right file that needs editing.

Edited July 17, 2014 by Bill Dalton (see edit history)