2 replies [Last post]
carolinarondon
Offline
newbie
Santo Domingo
Last seen: 8 years 19 weeks ago
Santo Domingo
Timezone: GMT-4
Joined: 2012-07-17
Posts: 2
Points: 3

Hello guys Smile
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 - <a href="http://dev7studios.com" rel="nofollow">http://dev7studios.com</a>
*/
.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 Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 10 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi carolinarondon, What you

Hi carolinarondon,
What you will have to do is think about what elements need to change on different screens.
Start by looking at the #slider and set it's width as a % rather then fixed.
Then the image within that will also have to change from a fixed width to a %.
You have the image width set in the html, you may have to change that, or at override it.

carolinarondon
Offline
newbie
Santo Domingo
Last seen: 8 years 19 weeks ago
Santo Domingo
Timezone: GMT-4
Joined: 2012-07-17
Posts: 2
Points: 3

Thank you Tony, Now what I

Thank you Tony,

Now what I just need is to make the titles of this slideshow responsive

There is something on this code below that if screen width is larger than 950px the text goes to extreme left to the website (click here to see website)

Tittle Code

.responsive-slider.flexslider .slide .slide-title {
	margin: auto;
	padding: 0;
	width: 100%;
}
.responsive-slider.flexslider .slide-title a {
	position: relative;
	top: 490;
        text-align: center;
	right: auto;
	font-size: 18px;
	line-height: 1.1em;
	color: #fff;
	background: #222;
	background: rgba(0,0,0,.3);
	text-shadow: none;
	margin: auto;
        padding: .5em 1em;
 
}

Thanks again