WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
Styling Slideshow for mobile (3 posts)

  1. blither
    Member
    Posted 1 year ago #

    Hi-
    please delete my previous post, as I would like to explain my issue in more depth.

    I am looking to
    1. delete extra whitespace below my slideshow on mobile devices
    2. scale the text down, while keeping the line-height. using webkit text adjust, I can get the text scaled down, but it does not seem to keep the line-height in proportion.

    My styling code is below.

    .slideshow_container { }

    .slideshow_container a { text-decoration: none; }

    .slideshow_container .slideshow_slide { margin-right: 2px; }
    .slideshow_container .slideshow_slide_text h2
    {
    text-align: left;
    margin-right: 10%;
    font-size: 5em;
    line-height: 1em;
    padding-bottom 1em;text-shadow: black 0.1em 0.1em 0.2em;
    -webkit-text-size-adjust: 30%; }

    .slideshow_container .slideshow_slide_text p {
    text-align: center;
    margin-right: 10%;
    font-family: 'american_captainregular';
    font-size: 5em;
    line-height: 1em;
    text-shadow: black 0.1em 0.1em 0.2em;
    -webkit-text-size-adjust: 30%;}
    .slideshow_container .slideshow_slide_image { }
    .slideshow_container .slideshow_slide_video { }

    .slideshow_container .slideshow_description h2
    { font-size: 5em;
    line-height: 1em;
    margin-right: 10%;
    text-align: left;
    text-shadow: black 0.1em 0.1em 0.2em;
    -webkit-text-size-adjust: 30%; }

    .slideshow_container .slideshow_description p {
    text-align: left;
    margin-right: 10%;
    font-family: 'american_captainregular';
    font-size: 5em;
    line-height: 1em;
    text-shadow: black 0.1em 0.1em 0.2em;
    -webkit-text-size-adjust: 30%;}
    .slideshow_container .slideshow_description a { color: #fff; }

    .slideshow_container .slideshow_description {width: 90%; height: 93%; }
    .slideshow_container .slideshow_transparent { filter: alpha(opacity = 100); opacity: 1; }
    .slideshow_container .slideshow_transparent:hover { filter: alpha(opacity = 100); opacity: 1; }

    .slideshow_container .slideshow_controlPanel {
    width: 21px;
    height: 21px;
    margin-left: -11px;
    background: #000;
    border-radius: 2px;
    -moz-border-radius: 10px;
    }

    .slideshow_container .slideshow_controlPanel ul { }

    .slideshow_container .slideshow_controlPanel ul li {
    margin: 3px;
    width: 15px;
    height: 15px;
    }

    .slideshow_container .slideshow_controlPanel ul li:hover { }

    .slideshow_container .slideshow_play {
    background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel.png') 0 0 no-repeat;
    }

    .slideshow_container .slideshow_pause {
    background: url('%plugin-url%/images/SlideshowPlugin/light-controlpanel.png') -15px 0 no-repeat;
    }

    .slideshow_container .slideshow_button {
    margin-top: -20px;
    height: 40px;
    width: 19px;
    background: url('%plugin-url%/images/SlideshowPlugin/light-arrows.png') no-repeat;
    }

    .slideshow_container .slideshow_previous { }

    .slideshow_container .slideshow_next {
    background-position: -19px 0;
    }

    .slideshow_container .slideshow_pagination { bottom: 16px; }

    .slideshow_container .slideshow_pagination_center { }

    .slideshow_container .slideshow_pagination .slideshow_currentView {
    filter: alpha(opacity = 50);
    opacity: 0.5;
    }

    .slideshow_container .slideshow_pagination ul { }

    .slideshow_container .slideshow_pagination ul li {
    margin: 0px;
    width: 11px;
    height: 11px;
    background: url('%plugin-url%/images/SlideshowPlugin/light-bullet.png') no-repeat;
    }

    http://wordpress.org/extend/plugins/slideshow-jquery-image-gallery/

  2. blither
    Member
    Posted 1 year ago #

  3. Stefan Boonstra
    Member
    Plugin Author

    Posted 1 year ago #

    Hi,

    The slideshow can automatically reduce its own height when it gets less wide, if the 'Shrink slideshow's height when width shrinks' setting is set to 'Yes'. When you set this setting to 'Yes', the 'Height' setting should disappear and the 'Proportional relationship' setting should appear.

    The text size and line height should be resized using CSS media queries, as I see you're already doing. The slideshow simply can't always determine the correct text size to display on all different screens.

    If you want to move the title closer to the description, there's still a padding of 10 pixels on both the 'h2' and the 'p' tag which you can remove.

    Best regards,
    Stefan

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.