Skip navigation
Currently Being Moderated

Height changes on carousel causes jump

Dec 10, 2012 12:48 AM

I have a carousel on this page: https://neighbourgood.co.uk/ and because the text changes the height of the element changes which causes the page to jump.

 

Can anyone suggest an easy fix?

 

Thanks

 

Martin

 

PS: I should have said, the biggest problem is on a smartphone.

 
Replies
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 10, 2012 4:31 AM   in reply to martcol

    One simple fix is to define a fixed height to the carousel container:

     

    Line 781 of bootstrap.min.css?ver=2.0.3

     

    .carousel{position:relative;margin-bottom:20px;line-height:1; height: 250px;}

    This way the div's following the .carousel div governs the 250px height for carousel, thereby will start at 251st pixel (relatively) on screen.

     

    The green area with caption will expand and contract depending on the amount of text it holds. However, the 'jumping' will stop.

     

    -ST

     
    |
    Mark as:
  • Sudarshan Thiagarajan
    4,000 posts
    Oct 15, 2010
    Currently Being Moderated
    Dec 10, 2012 11:07 PM   in reply to martcol

    You're welcome, martcol

     

    -ST

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points