responsive full width bootstrap carousel with small image on left and caption on right

Question

what i am trying to do is here example is in fiddle

I have .carousel-inner{min-widt=500px;} for large screen size (I want it responsive though)

Now my problem is i want first carousel slider image to be at center-left position of my carousel from top and bottom. and caption is on right side center and viz.

I have tried this code... but when i go on smaller devices the images goes on the caption.

https://jsfiddle.net/xe05ro61/4/

Answer 1

You can add just width:100%; of your image, i think then after your problem is solved.

Try below css:

Css:

.item img {
  width: 100%;
}

See Fiddle Demo Link

Answer 2

You will often need to use specific css rules for the small screen, to adapt your website to any browser size. To achieve such a thing, the common way is to use @media . To define a css rule that will target only screen with width under 640 px, use :

.myclass{
   background:red;
  }
@media screen and (max-width: 640px) {
.myclass{
   background:green;
  }
}

On PC screen, you will get a red background, on small mobile screen, a green one.

Now, replace these useless color definition by your position rules.