CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3responsive-design
raysefo
raysefo

Reputation: 472

Responsive Bootstrap Carousel

I have a web page and I am trying to use a bootstrap carousel. On the first slide there are 3 pictures and on the other slide there is a youtube video embedded to it. The page looks problematic on smaller resolutions.

Here is a how pictures look like on laptop: pictures on laptop

Here is how youtube video looks like on laptop: video on laptop

Here is how pictures look like on smaller resolution: pictures on 320x480

Here is video on smaller resolution: video on 320x480

Here is video on 360x640: video on 360x640

Is there a way to make pictures on carousel display on the center when it is smaller resoultion? And of course for the youtube video as well. The video is not on the center and exceeds the screen.

HTML

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">

        <div class="carousel slide" id="myCarousel">
            <div class="carousel-inner">

                <div class="row item active">

                    <div class="bannerImage">
                        <a href="#"><img src="images/waspmote_pro_t.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmote_exp_radio_board_2-375_t.png" alt="">
                        </a>
                        <a href="#"><img src="images/u13_gw_t.png" alt="">
                        </a>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <ul style="list-style-type: none;">
                                    <li><i class="fa fa-share-alt"></i> Connect any sensor</li>
                                    <li><i class="fa fa-rss"></i> Using any wireless technology</li>
                                    <li><i class="fa fa-cloud"></i> To any Cloud Platform</li>
                                </ul>

                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmote">
                                    <li><i class="fa fa-check-circle"></i> Ultra low power (0.7uA)</li>
                                    <li><i class="fa fa-check-circle"></i> 100+ Sensors available</li>
                                    <li><i class="fa fa-check-circle"></i> Over the Air Programming (OTA)</li>
                                    <li><i class="fa fa-check-circle"></i> Encryption Libraries (AES, RSA)</li>
                                    <li><i class="fa fa-check-circle"></i> Encapsulated line available</li>

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmote">

                                    <li><i class="fa fa-check-circle"></i> Industrial Protocolos: RS-232,RS-485,Modbus,CAN Bus, 4-20mA</li>
                                    <li><i class="fa fa-check-circle"></i> 3G/GPRS/LoRaWAN/LoRa/Sigfox/868/900MHz,ZigBee/802.15.4/WiFi/RFID/ NFC/ Bluetooth 4.0</li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /Slide1 -->

                <div class="row item">

                    <div class="bannerImage">
                        <a href="#"><img src="images/waspmoteps01.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmoteps02.png" alt="">
                        </a>
                        <a href="#"><img src="images/waspmote03.png" alt="" class="righter">
                        </a>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Plug & Sense</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <ul style="list-style-type: none;">
                                    <li><i class="fa fa-bolt"></i> Easy and fast deployment</li>
                                    <li><i class="fa fa-money"></i> Minimum maintenance costs</li>
                                    <li><i class="fa fa-exchange"></i> Services/network scalability</li>
                                    <li><i class="fa fa-cloud"></i> Any Cloud platform compatible</li>
                                </ul>

                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmoteps">
                                    <li><i class="fa fa-check-circle"></i> Integrating more than 80 sensors</li>
                                    <li><i class="fa fa-check-circle"></i> Robust waterproof IP65 enclosure</li>
                                    <li><i class="fa fa-check-circle"></i> Add/change sensor probe in seconds</li>
                                    <li><i class="fa fa-check-circle"></i> Solar powered internal and external panel</li>

                                </ul>
                            </div>
                            <div class="col-md-4">
                                <ul style="list-style-type: none;" class="waspmoteps">
                                    <li><i class="fa fa-check-circle"></i> Over the air programming (OTAP)</li>
                                    <li><i class="fa fa-check-circle"></i> Graphical/intuitive programming interface</li>
                                    <li class="space"><i class="fa fa-check-circle"></i> ZigBee, 802.15.4, 868, 900, LoRaWAN, LoRa, Sigfox, WiFi, 3G/GPRS and Bluetooth Low Energy</li>

                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- /Slide2 -->
                <div class="row item">

                    <div class="bannerImage">
                        <iframe width="480" height="270" src="https://www.youtube.com/embed/f1wXYGDvYAY?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Plug & Sense</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-12 waspmoteps">
                                <p>The new Waspmote Plug & Sense! line allows developers to forget about electronics and focus on services and applications. Now you can deploy wireless sensor networks in a easy and scalable way ensuring minimum maintenance costs. The new platform consists of a robust waterproof enclosure with specific external sockets to connect the sensors, the solar panel, the antenna and even the USB cable in order to reprogram the node. It has been specially designed to be scalable, easy to deploy and maintain.</p>
                            </div>


                        </div>
                    </div>

                </div>
                <!-- /Slide3 -->
                <div class="row item">

                    <div class="bannerImage">
                        <iframe width="480" height="284" src="https://www.youtube.com/embed/GRMMS8nOdwc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
                    </div>

                    <div class="caption row">
                        <div class="col-md-12">
                            <h3>Waspmote Events Sensor Board</h3>

                        </div>
                        <div class="row">
                            <div class="col-md-12 waspmoteps">
                                <p>More than 50 available sensors for the Waspmote platform. Values from the temperature, humidity, tilt, vibration, water, PIR, bend sensors integrated in the Events Sensor Board are sent using the 802.15.4/ZigBee radio.</p>
                            </div>


                        </div>
                    </div>

                </div>
                <!-- /Slide4 -->
            </div>

            <div class="control-box">
                <a data-slide="prev" href="#myCarousel" class="carousel-control left">‹</a>
                <a data-slide="next" href="#myCarousel" class="carousel-control right">›</a>
            </div>
            <!-- /.control-box -->

        </div>
        <!-- /#myCarousel -->

    </div>
    <!-- /.span12 -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

CSS

div {
    word-break: break-all;
}

img {
    max-width: 100%;
}

a {
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

    a:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        /* IE 8 */
        filter: alpha(opacity=50);
        /* IE7 */
        opacity: 0.6;
        text-decoration: none;
    }


/* Container */

.container-fluid {
    background: #fbf4e0;
    margin: 40px auto 10px;
    padding: 20px 0px;
    max-width: 960px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}


/* Page Header */

.page-header {
    background: #fbf4e0;
    margin: -30px 0px 0px;
    padding: 20px 40px;
    border-top: 4px solid #ccc;
    color: #000;
    text-transform: uppercase;
}

    .page-header h3 {
        line-height: 0.88rem;
        color: #000;

    }


/* Thumbnail Box */

.caption {
    height: 140px;
    width: 100%;
    margin: 10px 0px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

    .caption .span4,
    .caption .span8 {
        padding: 0px 20px;
    }

    .caption .span4 {
        border-right: 1px dotted #CCCCCC;
    }

    .caption h3 {
        color: #000;
        line-height: 2rem;
        margin: 0 0 20px;
        text-transform: uppercase;
        font-weight:bold;
    }

    .caption p {
        font-size: 1rem;
        line-height: 1rem;
        color: #000;
    }
    .caption ul{
         color: #000;
    }

.btn.btn-mini {
    background: #a83b3b;
    border-radius: 0 0 0 0;
    color: #fbf4e0;
    font-size: 0.63rem;
    text-shadow: none !important;
}

.carousel-control {
    top: 33%;
}


/* Footer */

.footer {
    margin: auto;
    width: 100%;
    max-width: 960px;
    display: block;
    font-size: 0.69rem;
}

    .footer,
    .footer a {
        color: #fff;
    }

p.right {
    float: right;
}


::selection {
    background: #ff5e99;
    color: #FFFFFF;
    text-shadow: 0;
}

::-moz-selection {
    background: #ff5e99;
    color: #FFFFFF;
}

a,
a:focus,
a:active,
a:hover,
object,
embed {
    outline: none;
}

:-moz-any-link:focus {
    outline: none;
}

input::-moz-focus-inner {
    border: 0;
}

.bannerImage img {
    margin-left: 10%;

}
.bannerImage iframe{
    margin-left: 25%;
    margin-right: 25%;
}
.waspmote{
    font-size:13px;
}
.waspmoteps{
    font-size:13px;
}
.space{
    margin-bottom:34px;
}
.righter{

    margin-left:18% !important;
}

edit 1: Here is what happened after media screen addedtexts under pictures are not display on the screen.

media screen

edit 2: Actually this markup works for pictures in the slide but still texts under the pictures are not visible in smaller resolutions.

<div class="bannerImage">
                                        <div class="row productsRow">
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmoteps01.png" alt=""></a>
                                            </div>
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmoteps02.png" alt=""></a>
                                            </div>
                                            <div class="col-md-4">
                                                <a href="#"><img src="images/waspmote03.png" alt="" class="righter"></a>
                                            </div>
                                        </div>
                                    </div>

CSS:

.productsRow {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
}

Edit 3: JSFiddle added: JSFIDDLE

EdiT 4: After removing the height, the videos are not centered. enter link description here

EdiT 5: Changing the iframe CSS worked for small resolutions. But for 768x1024 and 800x1280 portrait resolutions texts under pictures exceeds the screen.

part1: 768x1024_part1

part2: 768x1024_part2

Edit 6: The PC/Laptop resolution breaks.

sample

EdiT 7: Carousel starts on the main page automatically on IE 11 but supposed to be sliding on the active page!? Any ideas?

Here is the Jquery:

// Carousel Auto-Cycle
            $(document).ready(function () {
                $('.carousel').carousel({
                    interval: 6000
                })
            });

Upvotes: 0

Views: 862

Answers (2)

Andrew
Andrew

Reputation: 1534

Have you tried img-responsive class for images and embed-responsive class for video content? these are classes for responsive media content

Check this for images and this for video content

Upvotes: 0

Mario Kurzweil
Mario Kurzweil

Reputation: 480

The solution is not perfect, but I hope it also helps you.

For your container .bannerImage I defined width:100%; than you can achieve the responsiveness of your website.

@media queries: To set the size of the images to 100%, if the screen resolution is lower than 1024px.

CSS

.bannerImage img {
    width: 25%;
}
.bannerImage{
    padding-left: 15%;
    padding-right: 15%;
    width: 100%;
    height: auto;
}
.bannerImage iframe{
    width: 100%;
}
@media screen and (max-width: 1024px){
  .bannerImage img {
    width: 100%;
  }
}

jsfiddle

EDIT 1

Remove the height: 140px; on line 1430, after than your text will be shown in full height.

EDIT 2 UPDATE

So there was still an issue with the iframe pic, but this should fix it:

CSS

.bannerImage iframe, .video-container object, .video-container embed {
   position:absolute;
   top:0;
   left:0;
   width:80%;
   height:100%;
 }

.iframeImage{
   position:relative;
   padding-bottom:44.25%;
   height:0;
   left: -15%; //for centering the iframe
 }

HTML

<div class="bannerImage iframeImage">
 ...
</div>

Upvotes: 1

Related Questions