solved iSkin4 Top Image Slider

PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Hey Nate,

I really like your index page image slider on desktop and mobile, but on my iPad mini it has a large empty gray area under the image before section 2.

My current image slider does not do that, but it lacks the functionality that you have built into the iSkin4 image slider... plus my slider does not look nearly as nice on mobile. Do you think a middle point @media css option would be possible for the iSkin4 to look nice on tablets? Or is there a way to use the responsive ability of my image slider in the iSkin4 until it hits mobile size?

Here is the code I am using:

            <script type="text/javascript">
                $(function () {
                    $("#index_slider").responsiveSlides({
                        auto: true,          // Boolean: Animate automatically, true or false
                        speed: 400,          // Integer: Speed of the transition, in milliseconds
                        timeout: 6000,       // Integer: Time between slide transitions, in milliseconds
                        pager: false,         // Boolean: Show pager, true or false
                        random: false,        // Boolean: Randomize the order of the slides, true or false
                        pause: true,         // Boolean: Pause on hover, true or false
                        maxwidth: 1920,       // Integer: Max-width of the slideshow, in pixels
                        namespace: "rslides" // String: change the default namespace used
                    });
                });
            </script>
            
<div id="cbp-fwslider" class="cbp-fwslider">
	<ul id="index_slider">
		<li><a href="https://schoolhouse.assemble-together.org/" target="_blank"><img src="https://assemble-together.org/image/img/skin/atEZtree/SchoolHouse_Slide.jpg" alt="LEARN"/></a></li>
        <li><a href="https://assemble-together.org/user/signup"><img src="https://assemble-together.org/image/img/skin/atEZtree/Love_Slide.jpg" alt="LOVE"/></a></li>
		<li><a href="https://assemble-together.org/genealogy"><img src="https://assemble-together.org/image/img/skin/atEZtree/Life_Slide.jpg" alt="LIFE"/></a></li>
	</ul>
</div>



--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

updated by @the-patria-company: 10/11/16 01:19:30PM
nate
@nate
8 years ago
917 posts
Can you show me a screenshot?
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
iPad Mini gen3
image.jpg
image.jpg  •  396KB




--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
Showing stock photo and text
image.jpg
image.jpg  •  212KB




--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
My production site with the slider code above.
image.jpg
image.jpg  •  603KB




--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3
nate
@nate
8 years ago
917 posts
I'm seeing it on my Samsung. I think it's just a simple matter of max-height. I'll get back to you after some testing.
nate
@nate
8 years ago
917 posts
You can fix it immediately by removing the min-height rule. Just delete it.
.index {
    min-height: 793px;
    position: relative;
}

updated by @nate: 07/11/16 10:27:10AM
PatriaCo
PatriaCo
@the-patria-company
8 years ago
349 posts
AWESOME!! Thanks!


--
The Patria Company - patriaco.com / quality-trades.com / a-t.life - doing Jamroom since v3

Tags