make responsive slider work in both computer and smartphone

[carolinarondon]

Hello guys :)

I am making a website in WordPress. the theme brought a slideshow function but it is important to me that this slideshow view in mobile devices (such as Blackberry) in its 100% width, it is currently being seen by 50% because the image is to wide, so it has to be fixed using CSS.

Alternatively because I have not found help so far I installed a plugin that it is perfectly working in Blackberry but in desktop the slideshow is the monitor screen is wider it goes to the extreme left of the browser window and the text to the extreme right part.

You can see website clicking here

I need you to see if you can help me modifying one of the slideshows’ CSS

THEME CSS

/* =Nivo Slider

*/

.nivoSlider {

position: fixed;

border: 1px solid white;

zoom: 1;}

.nivoSlider:after {

content: "."; display: block; clear: both;  visibility: hidden; line-height: 0; height: 0;}

.nivoSlider:after, .nivoSlider:before {

content: ""; display: table;}

.nivoSlider img {

position: fixed; top: 0px; left: 0px; max-width: 90%; height: 100%;}

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



.nivo-slice {  display: block;  position: absolute;  z-index: 5;  height: 100%;}



.nivo-box {  display: block;  position: absolute;  z-index: 5;

}



/* Caption styles */

.nivo-caption {  font-size: 18px;  font-weight: bold;  position: absolute;  left: 0px;  top: 10px;  background: #000;  color: #fff;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);  opacity: 0.6;  /* Overridden by captionOpacity setting */  width: 20%;  z-index: 8;}

.nivo-caption p {  padding: 10px;  margin: 0;  font-family: "Bookman Old Style", Georgia, Times, Times New Roman, serif;}

.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 a {  display: inline;  position: relative;  z-index: 9;  cursor: pointer;}

.nivo-controlNav a.active {  font-weight: bold;}



#slider .nivo-controlNav img {  display: inline;  /* Un-hide the thumbnail image element */  margin: 10px 10px 0 0;  /* Provide some white space around the thumbs */  border: 1px solid #6D3707;  zoom: 1;}



#slider .nivo-controlNav img:after {  content: ".";  display: block;  clear: both;  visibility: hidden;  line-height: 0;  height: 0;}

#slider .nivo-controlNav img:after, #slider .nivo-controlNav img:before {  content: "";  display: table;}



#slider .nivo-controlNav {  position: absolute;  bottom: -105px;  margin: 0 auto;  width: 100%;  text-align: center;  border-top: 1px solid #4F2600;

padding-top: 15px;}



/*

Skin Name: Nivo Slider Default Theme

Version: 1.0

Author: Gilbert Pellegrom - http://dev7studios.com

*/

.theme-default .nivoSlider {  background: transparent url(images/loading.gif) no-repeat 50% 50%;  position: relative;  width: 950px;  height: 400px;

}

.theme-default .nivoSlider img {  position: absolute;  top: 0px;  left: 0px;  display: none;}



.theme-default .nivoSlider a {  border: 0;  display: block;}

.theme-default .nivo-controlNav {  position: absolute;

bottom: -42px;  margin-left: -40px;  /* Tweak this to center bullets */

}

PLUGIN CSS

/*

* jQuery FlexSlider v1.8



/* Browser Resets */

.flex-container a:active,

.flexslider a:active {outline: none;}

.slides,

.flex-control-nav,

.flex-direction-nav {margin: 0; padding: 0; list-style: none;}



/* FlexSlider Necessary Styles

*********************************/

.flexslider {width: 100%; margin: 0; padding: 0;}

.flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img {max-width: 100%; display: block;}

.flex-pauseplay span {text-transform: capitalize;}



/* Clearfix for the .slides element */

.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

html[xmlns] .slides {display: block;}

* html .slides {height: 1%;}



/* No JavaScript Fallback */

/* If you are not using another script, such as Modernizr, make sure you

* include js that eliminates this class on page load */

.no-js .slides > li:first-child {display: block;}





/* FlexSlider Default Theme

*********************************/

.flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}

.flexslider .slides {zoom: 1;}

.flexslider .slides > li { position: absolute;   top: 50%;   left: 50%;}

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */

.flex-container {zoom: 1; position: relative;}



/* Caption style */

/* IE rgba() hack */

.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}

.flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px; text-align: center;}





/*  Responsive Slider/

.responsive-slider.flexslider {	background: transparent !important;	border: none !important;	-webkit-border-radius: 0 !important;	-moz-border-radius: 0 !important;	-o-border-radius: 0 !important;	border-radius: 0 !important;	margin-bottom: 30px;

align: middle;}

.responsive-slider.flexslider a, .responsive-slider.flexslider a:visited, .responsive-slider.flexslider a:hover {	text-decoration: none;	border-bottom: none;

}

.responsive-slider.flexslider .slides img {	height: auto !important;	border: none;	margin: 0;	padding: 0;	background: none;

}

.responsive-slider.flexslider .slides, .responsive-slider.flexslider .slides li {	list-style: none;	margin: 0;	padding: 0;

}

.responsive-slider.flexslider .flex-direction-nav, .responsive-slider.flexslider .flex-direction-nav li {	list-style: none;	margin: 0;	padding: 0;

}

.responsive-slider.flexslider .flex-direction-nav li a {	width: 40px !important;	height: 40px !important;	background: url(../images/slider-nav.png) no-repeat 0 0 !important;	text-align: left;	text-indent: -9999em;	top: 47.5% !important;	opacity: 0;	-webkit-transition: all 0.18s ease-out;	-moz-transition: all 0.18s ease-out;	-ms-transition: all 0.18s ease-out;	-o-transition: all 0.18s ease-out;	transition: all 0.18s ease-out;

}

.responsive-slider.flexslider .slide {	position: relative;

}

.responsive-slider.flexslider .slide .slide-title {	margin: 0;	padding: 0;

}

.responsive-slider.flexslider .slide-title a {	position: absolute;	top: 0;	right: 0;	font-size: 18px;	line-height: 1.3em;	color: #fff;	background: #222;	background: rgba(0,0,0,.3);	text-shadow: none;	margin: 0;	padding: .5em 1em;

}

.responsive-slider.flexslider .slide-title a:hover {	color: #fff;	background: rgba(0,0,0,.5);

}

thanks :)

[carolinarondon]

ok, I centered the plugin images, now I just need to center the text

[Author]

Posts