Known Participant

Answered

Bootsrap Carousel image not responsive

Forum|Forum|7 years ago
November 1, 2018
2 replies
765 views

Hi all,

Here is my link

ANEH - 2019 | Home

The images in the carousel (Home Page) are not responsive.The images were embedded as a background.So I don't know how to make them to be responsive.

Kindly help to make them responsive.

.carousel-item.item4 {

background: url(../images/ANEH2019-Web-V3.png) no-repeat;

background-size: cover;

}

Thanks.

This topic has been closed for replies.

Correct answer Paul-M

I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">

I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....

e.g.:

<div class="carousel-inner"> <div class="item active"> <img src="/folder/image1.jpg" class="img-fluid"> </div> <div class="item"> <img src="/folder/image2.jpg" class="img-fluid"> </div> <div class="item"> <img src="/folder/image3.jpg" class="img-fluid"> </div> </div>

Also you still have some messed up comment tags in that page ..

P

Paul-M

Legend

Could also try:

background-size: cover; background-repeat: no-repeat; background-position: center center;

Paul-M - Community Expert

P

Paul-M

Legend

try adding

background-size: contain;

so:

.carousel-item.item4 {

background: url(../images/ANEH2019-Web-V3.png) no-repeat;

background-size: contain;

}

Paul-M - Community Expert

RoopavathyAuthor

Known Participant

Yes... I did ...and its responsive .....but it gets left aligned in desktop view.And there is gap at the right side....

P

Paul-MCorrect answer

Legend

I think it would be easier to add the images to each slide with <img src="folder/image.jpg" class="img-fluid">

I'm pretty sure you don't then need to name each slide .item1 .item2 etc then so ....

e.g.:

<div class="carousel-inner"> <div class="item active"> <img src="/folder/image1.jpg" class="img-fluid"> </div> <div class="item"> <img src="/folder/image2.jpg" class="img-fluid"> </div> <div class="item"> <img src="/folder/image3.jpg" class="img-fluid"> </div> </div>

Also you still have some messed up comment tags in that page ..

Paul-M - Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded