Bootstrap responsive work around

[Aidan Watt]

Have included the carousel element in my new website which needs a specified height in order to function. However when viewed in media smaller than 1200 pixels the images do not remain in proportion, even though I have added the

class="img-rounded img-responsive"

img-rounded functions – img responsive does not.

Any help or tips would be great. Thanks

Aidan

[ayottepl]

Hi Aidan,
In case you have not solve yourself this problem, can you post an example on jsfiddle/codepen or give us a link to see it?

Thanks

[Aidan Watt]

Hi Ayottepl

Have tried in codepen but it will not save any tips on how to get it to save – will try jsfiddle.

Aidan

[Aidan Watt]

Hi JS fiddle has got it I think

http://jsfiddle.net/aidanwatt/ZveC3/

does need the latest version of jquery – v1.9.1 to run which I have added as a resource – there are no images so please add a 1150wide by 500 deep image as holder.jpg and it should work.

Thanks for looking

[ayottepl]

Hey!

Thanks, i’ve updated your jsFiddle : http://jsfiddle.net/ZveC3/1/

Is it what you need? Look into the css section at the end i’ve added some code.

I put “!important” because i didn’t had access to bootstrap css but i you can modify the file directly you will not need it.

Hope it could help you, good luck!

/**ADDED**/

.carousel-inner > .item > img{
height:auto!important;
position:relative!important;
}
.carousel .item{
overflow:hidden!important;
height:auto;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}

[ayottepl]

Sorry, i didn’t explain you the problem.

I don’t know what’s the use case of your css class, but the problem was because your images were in position absolute. That mean the container did not had any height because he had “nothing” inside.

You don’t need height anymore on your images or containers, it will be responsive and fluid ;)

[Aidan Watt]

Thanks very much for your input this is my first real attempt at learning and understanding HTML5 and CSS.

[Aidan Watt]

stunning job ayottepl – picture degrades perfectly!

Any thoughts on getting the text to be a little more responsive – I am using web developer add-on to Firefox to view the responsive layouts and text is staying really quite large will tinker but if you can give me a minute would be grateful.

Regards Aidan

[Author]

Posts