Skip to main content
jzutter
jzutter
Known Participant
January 24, 2017
Answered

Fitting smaller browser size

  • January 24, 2017
  • 1 reply
  • 219 views

I need some help.

I need help on getting my footer to fit 100%. i want each div to stack on top of each other when when its in the browser size768 px or smaller. There are more things i want to do that but i think once im shown what to do once i can figure the rest out.

the website address is http://www.zutterdesign.com/bates. thanks

    This topic has been closed for replies.
    Correct answer Nancy OShea

    This is the last time I'm doing this for you. 
    Copy & paste this code into a new, blank page.  Save and preview in browsers.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Panels</title>

    <!--for mobile devices-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css">

    <style>

    body { padding-top: 63px }

    .center-block { float: none }

    .carousel img {width:100%; height: 100%}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#">Bates Bros.</a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav--></nav>

    <header class="bg-primary">

    <img class="img-responsive"  src="http://www.zutterdesign.com/bates/Images/pagefiles/showlogosloganlarge.png" alt="banner">

    </header>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active"> <img src="http://lorempixel.com/1180/400/abstract/4" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/3" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/2" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/1" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <!--end active-->

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

    <!--end carousel--></div>

    <hr>

    <div class="container">

    <div class="row">

    <!--begin panel columns-->

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal1">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal2">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal3">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal4">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    </div>

    <!--LOWER CONTENT-->

    <div class="row">

    <div class="col-sm-7">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-offset-1 col-sm-4 ">

    <h3>Right side content here</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

    </div>

    <!--/row--></div>

    <!--end cotnainer--></div>

    <hr>

    <div class="container-fluid">

    <footer class="row bg-primary">

    <!--4 columns-->

    <div class="col-md-2">

    <p class="text-right">logo here</p>

    </div>

    <div class="col-md-4">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    <div class="col-md-3">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    <div class="col-md-3">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    </footer>

    </div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>

    Nancy

    1 reply

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity ExpertCorrect answer
    Community Expert
    January 25, 2017

    This is the last time I'm doing this for you. 
    Copy & paste this code into a new, blank page.  Save and preview in browsers.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Panels</title>

    <!--for mobile devices-->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css">

    <style>

    body { padding-top: 63px }

    .center-block { float: none }

    .carousel img {width:100%; height: 100%}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#">Bates Bros.</a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    <span class="icon-bar"></span>

    </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav--></nav>

    <header class="bg-primary">

    <img class="img-responsive"  src="http://www.zutterdesign.com/bates/Images/pagefiles/showlogosloganlarge.png" alt="banner">

    </header>

    <!--begin Bootstrap Carousel-->

    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5200">

    <!-- Indicators -->

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    </ol>

    <!-- Wrapper for slides -->

    <div class="carousel-inner" role="listbox">

    <div class="item active"> <img src="http://lorempixel.com/1180/400/abstract/4" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/3" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/2" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <div class="item"> <img src="http://lorempixel.com/1180/400/abstract/1" alt="...">

    <div class="carousel-caption">

    <h3>Heading 3</h3>

    <p>Details....</p>

    </div>

    </div>

    <!--end active-->

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>

    <!--end carousel--></div>

    <hr>

    <div class="container">

    <div class="row">

    <!--begin panel columns-->

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal1">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal2">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-primary">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal3">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    <div class="col-sm-6 col-lg-3">

    <div class="panel panel-warning">

    <div class="panel-heading">

    <h3 class="text-center">Heading 3</h3>

    </div>

    <div class="panel-body"> <img class="img-responsive center-block" src="http://dummyimage.com/400x200.jpg" alt="...">

    <p class="text-primary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi! </p>

    <button type="button" class="btn btn-sm btn-primary center-block" data-toggle="modal" data-target="#myModal4">CLICK FOR DETAILS</button>

    </div>

    </div>

    </div>

    </div>

    <!--LOWER CONTENT-->

    <div class="row">

    <div class="col-sm-7">

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    <h3>Heading 3</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim. </p>

    </div>

    <div class="col-sm-offset-1 col-sm-4 ">

    <h3>Right side content here</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Mauris vitae libero lacus, vel hendrerit nisi!  Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.  Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.  Aenean tristique enim ut ante dignissim.</p>

    </div>

    <!--/row--></div>

    <!--end cotnainer--></div>

    <hr>

    <div class="container-fluid">

    <footer class="row bg-primary">

    <!--4 columns-->

    <div class="col-md-2">

    <p class="text-right">logo here</p>

    </div>

    <div class="col-md-4">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    <div class="col-md-3">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    <div class="col-md-3">

    <h3>something here</h3>

    <h4>Something here</h4>

    <p>something here</p>

    </div>

    </footer>

    </div>

    <!--latest jQuery-->

    <script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script>

    <!--Bootstrap-->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </body>

    </html>

    Nancy

    Nancy O'Shea— Product User & Community Expert
    Firefly Community Gallery
    Adobe Firefly

    Remix with Firefly Community Gallery

    Thousands of free creations to fall in love with and remix in Firefly.

    Explore now
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices