CODEWITHSUNDEEP
javascriptjqueryhtmlcssflexslider
niGeLL
niGeLL

Reputation: 355

Flexslider pushing down content when it loads

My home page has different sections with anchor tags on them. One of the sections contains a full width 'flexslider' slider. When I link to any anchor on the home page that is below the slider, from another page, the viewport initally goes to the right place. But when flexslider loads it pushes everything down.

I fixed this by defining a fixed width and height for the flexslider container, but that's not a valid solution because my site is responsive.

Any solution would be very much appreciated, I've been at this all day.

EDIT: Markup:

<div class="flexslider">
    <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    </ul>
 </div>

CSS:

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide      the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

When I set a fixed height to the .flexslider class, the page doesn't offset when the slider loads, but that's obv not responsive. I tried using max-height instead, but that didn't "reserve" the space for the slider.

Upvotes: 1

Views: 891

Answers (3)

B4rT
B4rT

Reputation: 31

you can reserve the space by adding just two additional CSS lines to the "slides" element.

First, you must get the aspect ratio of your slider by diving the height trough the width of your images, e.g. your images are 2048x820px, the ratio is 820/2048 ~ 0.4.

Then the additional css lines are:

.flexslider .slides {
height: 0;
padding-bottom: 40%; /* if it doesn't fit exactly, try a minimal higher value, eg. 40.05%;  maybe you need to add !important too, to overwrite some previous values */
background: red; /* just for testing purposes, this line can be removed afterwards */
}

Upvotes: 1

Timtech
Timtech

Reputation: 1274

In your code, replace all instances of height and width with max-height and max-width. Even on a responsive site, this should not push stuff out of the max boundaries.

If you need more specific help, please post edit your current code into your question.

Upvotes: 2

wanderer
wanderer

Reputation: 111

Instead of using fixed height and width, use max-height and max-width.

Hope this helps you

Upvotes: 0

Related Questions