Any possibles to make slider more flexible to mobile screens

Hello,
there is a simple css to do. Go to your style.css file in your theme folder. Change this line “213 .slides .slide-thumb img {position: absolute;left: 50%;top: 50%;-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: auto;min-width: 102%;height: auto;min-height: 500px;}
“
to this:

.slides .slide-thumb img {position: absolute;left: 50%;top: 50%;-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: auto;max-width: 100%;height: auto;}

You will see the images are shrinking with the size of your mediascreen.

At least you have to jusytify your height by mediascreen. Is simply css as well. Hope this solved your problem.

Sorry my english is not so good.

Thanks for your path compass, Duggy1984!

It’s nice now, but no perfect, because of the main slider is not placed in the top of the homepage, although how I mark auto width resizing for mobile screens is correct.

Please visit bristeil.com from your mobile to look at it.
This blank background space in the centre of the screen is coded in this piece now.

Any ideas are appreciated. ??

/*slider*/
/******************************************************************
jQuery SLIDER STYLES
******************************************************************/
#load-cycle {background: url(library/images/loading.gif) no-repeat center center;width: 100%;height: auto;min-height: 100px;}
#slide-wrap {border-top: 0;}
.cycle-slideshow {position: relative; height: auto;width: 100%;display: none;overflow: hidden;}
.slides {height: 500px;width: 100%;overflow: hidden;}
.slides .slide-thumb {position: relative;width: 100%;height: 500px;overflow: hidden;white-space: nowrap;}
.slides .slide-thumb img {position: relative;left: 50%;top: 50%;-moz-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: auto;max-width: 100%;height: auto;}
html.no-csstransforms .slides .slide-thumb img {left: 0;top: 0;}
.slides .slide-noimg {position: relative;width: 100%;height: 500px;overflow: hidden;white-space: nowrap;background-color: #333;font-family: "Raleway-Regular", Helvetica,sans-serif;font-size: 21px;font-weight: 400;text-transform: uppercase;color: #d0d0d0;text-align: center;}
.slides .slide-noimg p {position: absolute;width: 100%;left: 0;top: 42%;}
.slide-title {font-family: "Raleway-Bold", Helvetica,sans-serif;font-size: 24px; /* for ie8 & below */font-size: 24px;font-weight: 400;line-height: 1;margin-top: 0;margin-bottom: 15px;}
.slide-copy p{margin: 0;}.slide-title a,.slide-title a:visited {}
.slide-copy-wrap {position: absolute;bottom: 0;z-index: 100;color: #fff;}
.slide-copy-wrap a {color: #fff !important;}
html.no-csstransforms .slide-copy-wrap {left: 60px;right: 60px;}
.slide-copy {padding: 10px 40px;background-image: url(library/images/trans.png);margin-right: 30%;border-radius: 3px;}
#sliderprev,#slidernext {text-align: center;position: absolute;top: 42%;border-radius: 50%;text-decoration: none;background-color: #fff;font-family: "Raleway-Regular", Helvetica,sans-serif;font-size: 50px;width: 72px;height: 72px;line-height: 67px;z-index: 9999;text-indent: -9999px;outline: none;opacity: 0.9;display: none;}
#sliderprev {left: 10px;background: url(library/images/slider-nav.png) no-repeat 0 -13px;}
#slidernext {right: 10px;background: url(library/images/slider-nav.png) no-repeat -128px -11px;}
.cycle-slideshow:hover #sliderprev,
.cycle-slideshow:hover #slidernext,.cycle-slideshow:focus #sliderprev,
.cycle-slideshow:focus #slidernext {display: block;}
.cycle-paused:after {content: 'Paused'; font-family: "Open Sans", Arial, Helvetica, sans-serif;font-size: 12px; /* for ie8 & below */font-size: 0.75rem;text-transform: uppercase;color: white; background: black; padding: 5px 15px;z-index: 500; position: absolute; top: 10px; right: 10px;opacity: .5; filter: alpha(opacity=50);}
/* pager */
.cycle-pager { text-align: center; width: 100%; z-index: 500; position: absolute; bottom: 10px; overflow: hidden;}
.cycle-pager span { font-family: Arial, Helvetica, sans-serif; font-size: 50px; line-height: .6;width: 18px; height: 22px; display: inline-block; color: #f7f7f7; cursor: pointer;text-shadow: -1px -1px #bcbcbc;overflow: hidden;}
.cycle-pager span.cycle-pager-active { color: #efefef; }
.cycle-pager > * { cursor: pointer;}
.no-slide-image {position: absolute;width: 100%;top: 40%;font-family: "Open Sans", Arial, Helvetica, sans-serif;font-size: 34px;font-weight: 700;text-transform: uppercase;text-align: center;line-height: 1.5em;}

Duggy1984

THANKS FOR YOUR SOLUTION!

I added .slide-copy-wrap as a selector, because the wrap seemed to be sliding off the image. Then, I changed the width declaration for the 530 and 1039 media queries. I’m sure someone could tweak it even more. (Or tell me if the screen goes whack in a mobile browser I don’t have.)

I used Jetpack’s custom CSS page, which appears under Appearance as “Edit CSS.” Before Jetpack, I would added custom CSS code the top of the stylesheet with the note tweaks, /*tweaks*/. I’d save my tweaks since upgrades to theme would wipe them out every time.

Any way… here’s the custom CSS I added….

.slides .slide-thumb .slide-copy-wrap img {
	position: absolute;
	left: 50%;
	top: 50%;
	-moz-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: auto;
	max-width: 100%;
	height: auto;
}

@media screen and (max-width: 1039px) {
	.slides, .slides .slide-thumb, .cycle-slideshow {
		height: 400px !important;
	}
}

@media screen and (max-width: 539px) {
	.slides, .slides .slide-thumb, .cycle-slideshow {
		height: 200px !important;
	}
}

Hope this works for other newbies as well as it has for me, so far.