0

I am working on a carousel that is 50% off a page. It is the same one that is in the bootstrap modern business template. I have tried multiple ways to get the images to be responsive when re-sizing the page with no luck. The images are 1920px x 740px. The 1st one is correctly aligned when it's a half page, but when it's in fullscreen mode it is cut off. The code in the 3rd image is what came in the template and the first two were my attempts to fix it.

The carousel scrolls correctly, the buttons work etc. It's just the responsive portion I cannot figure out.

This is my first post on here, so if there is more information you need please let me know. Also I apologize if this is not formatted correctly. Thank you for any & all help. 

<div class="carousel-inner">
        <div class="item active">
            <img src=img/logo3.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2></h2>
            </div>
        </div>
        <div class="item">
         <img src=img/logo2.jpg alt="Logo" class="img-responsive">
            <div class="carousel-caption">
                <h2>Caption 2</h2>
            </div>
        </div>
        <div class="item">
            <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
            <div class="carousel-caption">
                <h2>Caption 3</h2>
            </div>
        </div>
    </div>

There are 2 .css files in the template I am using. Here is the css for the carousel for both

/* Home Page Carousel */

header.carousel {
height: 50%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 100%;
}

header.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}

And the second - I didn't include the controls css since that part is working. 

.carousel {
position: relative;
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden;
}
.carousel-inner > .item {
position: relative;
display: none;
-webkit-transition: .6s ease-in-out left;
   -o-transition: .6s ease-in-out left;
      transition: .6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
     -o-transition:      -o-transform .6s ease-in-out;
        transition:         transform .6s ease-in-out;

-webkit-backface-visibility: hidden;
        backface-visibility: hidden;
-webkit-perspective: 1000;
        perspective: 1000;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
}
.carousel-inner > .item.next.left,
.carousel-inner > .item.prev.right,
.carousel-inner > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
display: block;
}
.carousel-inner > .active {
left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
position: absolute;
top: 0;
width: 100%;
}
.carousel-inner > .next {
left: 100%;
}
.carousel-inner > .prev {
left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
left: 0;
}
.carousel-inner > .active.left {
left: -100%;
}
.carousel-inner > .active.right {
left: 100%;
}
Sami_D
  • 1
  • 3
  • All of this looks right, the next step it to look at the container... is that also responsive? The carousel will take the size of whatever container it is in, so if it is a set width, the carousel will be as well. – Daniel Nov 25 '14 at 15:59
  • Where do I check the container & set it to be responsive? – Sami_D Nov 25 '14 at 16:27
  • It's hard to say without seeing code. You said the body is split into 2 50% columns.. check every div/container inside of the one that contains the carousel and look for a div with a set width. If you are using bootstrap it would be classed .container. If you are using .container, try changing it to .container-fluid. Again this is just a guess, I cannot know without seeing your code. – Daniel Nov 25 '14 at 16:30
  • I just added the css files I have. I hope that it what you were looking for. – Sami_D Nov 25 '14 at 16:44
  • If you could post a link to your full code or setup a jsfiddle that contains all of it that would help. Beyond that I am not sure I can help any more with the information I have. – Daniel Nov 25 '14 at 16:53
  • tdanielcox - Thank you for your patience with me. This is my first time using a site like this so please forgive my ignorance, here is the link to the jfiddle. Hoping I did it correctly. http://jsfiddle.net/jj7he1ve/ – Sami_D Nov 25 '14 at 17:35
  • The images are responding correctly in the fiddle as you can see by dragging the viewport left and right. My last quess would be to check that all your CSS is loading correctly and that you are using a supported browser. Beyond that I am not sure what to tell you. Good luck. – Daniel Nov 25 '14 at 17:50

1 Answers1

0

What about change your class:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
}

to:

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
line-height: 1;
display: block;
max-width: 100%;
height: auto;
}

and check it out?.

Bosko Skrbina
  • 713
  • 1
  • 5
  • 5
  • the bootstrap carousel already has these styles on images by default, and even if it didnt the .img-responsive class he has on the images would do this. – Daniel Nov 25 '14 at 16:58