WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] slideshow cosmetic issues via mobile (6 posts)

  1. technobuddha
    Member
    Posted 4 months ago #

    Hi all,
    I have been trying hard to work with the slideshow for both the desktop and mobile. I have seemed to solve the issue with the auto height / width and image proportion for both the desktop and mobile. BUT, for some reason, in the mobile version, everything works the way I want it, but the "page" that the slider is on is quite high, the right and left navigation arrows are below the images, and the navigation circles are down at the bottom of the page, creating a huge gap..

    How could this be changed?

    the website is located here.

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

  2. thekat
    Member
    Posted 4 months ago #

    What you'll want to do is add the following into your responsive stylesheet...

    .responsive .slideshow_container {
    display: flex;
    margin-bottom: -100%;
    }

    Then head into the slideshow's settings and hit 'yes' on "Shrink slideshow's height when width shrinks" (The default is 'no').

    Tinker with the aspect ratio above the 'image behavior' field. I've got a squareish slideshow running on one of my sites, so 5:4 works best in this particular case.

  3. thekat
    Member
    Posted 4 months ago #

    And if you can't figure out the aspect ratio for your slideshow, use this calculator. You'll have to determine the height and width of your image slides first however.

  4. technobuddha
    Member
    Posted 4 months ago #

    Hi Thekat!

    I have everything working the way I like, but I'm told this is the problem: <div class="slideshow_container .slideshow_container_style-light" style="height: 480px; ">

    I have CSS already that I THOUGHT changed that, and its here:

    @media only screen and (max-device-width: 480px) {
    .slideshow_container .slideshow_slide {
    height: auto!important;
    }
    }

    this code does work! but the height is what's causing the problem with the page.

  5. technobuddha
    Member
    Posted 4 months ago #

    OH! I should mention that I can't do this:

    Then head into the slideshow's settings and hit 'yes' on "Shrink slideshow's height when width shrinks" (The default is 'no').

    why? because the height does have to be set to 480px for the Desktop version. but I want it to be auto for mobile.. hmmmm unless I can set it to 480px via CSS for desktop! I'll try that way too!

    thanks so much for your time!

  6. technobuddha
    Member
    Posted 4 months ago #

    yes! I did as you said, and confirmed the aspect ratio, which is 2:1, and it works perfect for both the desktop AND the mobile! and I don't need any mobile code.

    thanks so much!

Reply

You must log in to post.

About this Plugin

About this Topic