• We use mobile devices (smartphones, tablets, etc.) to be connected with favourite websites. This theme is adorable, desktop version looks fantastic, but there are still fixed slider size options to 1200×500 without any resizing to be match with a lot of resolutions of mobiles–

    It looks not good, a randomly spotlighted squad piece of image highlight not the main sense of a front picture often.

    Is there a possible hope to apple just the ‘align=center’ command to this nice slider pictures set how it works on other WP based websites?

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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.

    Thread Starter pr12402

    (@pr12402)

    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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Any possibles to make slider more flexible to mobile screens’ is closed to new replies.