asked on

Mi carrousel images do not fit in movil devices

Hi you guys my carrousel do not fit to movil devices,
any idea please you guys,

 <div class="container">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="c-wrapper">
                    <div id="carousel-example-generic" class="carousel slide">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                         
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="Images/carrousel11.jpg" alt="" style="width:100%">
                            </div>
                            <div class="item">
                                <img src="Images/carrousel5.jpg" alt="" style="width:100%">
                           </div>
                            <div class="item">
                                <img src="Images/carrousel3.jpg" alt="" style="width:100%">
                            </div>
                        </div>

                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

Open in new window

Ernesto

ASKER

this is the class im using for fit the carrousel images at my need

<style>
  div.c-wrapper{
   height: 406px;
width: 940px; /* use this, or not */
margin: auto;
}

        .carousel-inner > .item > img,
        .carousel-inner > .item > a > img {
            height: 406px;
            width: 940px; /* use this, or not */
            margin: auto;
        }

    </style>

Open in new window

lenamtl

Hi,

You are using fixed value for height and weight so this won't work well for other device, you can use % instead of px
or you can use @media in your css file so it will set specific value for a specific width.

you need to add CSS for other media queries
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

this is just an example you will need to select the width depending of your needs.

@media only screen and (max-width: 500px) {
   /* specific CSS for that width */

}

Open in new window

or you may like to try Owl Carousel for you slider which have more options https://owlcarousel2.github.io/OwlCarousel2/

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

Members can start a 7-Day Free trial then enjoy unlimited access to the platform.

View membership options

Learn why we charge membership fees

We get it - no one likes a content blocker. Take one extra minute and find out why we block content.