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