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

Responsive Website with Fluid Grid Layout

  • January 7, 2017
  • 1 reply
  • 961 views

I am working on building a website. I get the css complete but when i go and change it based on the browser size (nothing happens).

This is what Dreamweaver has in the css and the the div class goes below it.

/* Mobile Layout: 480px and below. */

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

I dont want the tablet and desktop to inherit anything.

Please Help

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

    Will look into the Bootstrap way. spent a ton of time and late nights to get where i am at and dont want to throw that all away.


    Building a responsive layout first will make your life much easier.   As a quick example, this layout will work on all devices from the onset.  Simply add your content to the appropriate containers and you're good to go. 

    Code:

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap Panels with Modals, Flatly Theme</title>

    <!--for mobile devices-->

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

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

    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    <!--BOOTSTRAP FLATLY COLOR THEME-->

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

    <style>

    body {padding-top: 71px}

    .center-block {float:none}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

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

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#">Brand or Logo </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>

    <div class="container">

    <div class="row">

    <div class="col-sm-10 center-block text-center">

    <img class="img-responsive center-block" src="http://zutterdesign.com/bates/Images/pagefiles/showlogo.png" alt="logo">

    <h1>Our Awesome Website</h1>

    <h2>Some Pithy Slogan</h2>

    </div>

    </div>

    <div class="row">

    <!--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>

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

    <hr>

    <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-default 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-default 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-default 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-default 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>Twitter Feed Scroller 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>

    <hr>

    <div class="row">

    <footer class="col-sm-12">

    <p class="small">Template courtesy of <a href="http://alt-web.com">Alt-Web.com</a><br>

    Placeholder images from Dummyimage.com & Lorempixel.com</p>

    </footer>

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

    <!--/container--></div>

    <!-- Begin Modal Windows for Panel details-->

    <div class="modal fade left" id="myModal1">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-header">

    <h3 class="pull-left">Heading 3</h3>

    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove-sign"></span></button>

    </div>

    <div class="modal-body small" style="text-align:left">

    <img class="img-responsive"  src="http://dummyimage.com/600x400.jpg" alt="image details">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

    </div>

    <div class="modal-footer">

    <p class="pull-left">Modal Footer</p>

    <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

    </div>

    </div>

    </div>

    </div>

    <div class="modal fade left" id="myModal2">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-header">

    <h3 class="pull-left">Heading 3</h3>

    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove-sign"></span></button>

    </div>

    <div class="modal-body small" style="text-align:left">

    <img class="img-responsive"  src="http://dummyimage.com/600x400.jpg" alt="image details">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

    </div>

    <div class="modal-footer">

    <p class="pull-left">Modal Footer</p>

    <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

    </div>

    </div>

    </div>

    </div>

    <div class="modal fade left" id="myModal3">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-header">

    <h3 class="pull-left">Heading 3</h3>

    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove-sign"></span></button>

    </div>

    <div class="modal-body small" style="text-align:left">

    <img class="img-responsive"  src="http://dummyimage.com/600x400.jpg" alt="image details">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

    </div>

    <div class="modal-footer">

    <p class="pull-left">Modal Footer</p>

    <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

    </div>

    </div>

    </div>

    </div>

    <div class="modal fade left" id="myModal4">

    <div class="modal-dialog">

    <div class="modal-content">

    <div class="modal-header">

    <h3 class="pull-left">Heading 3</h3>

    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="glyphicon glyphicon-remove-sign"></span></button>

    </div>

    <div class="modal-body small" style="text-align:left">

    <img class="img-responsive"  src="http://dummyimage.com/600x400.jpg" alt="image details">

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, quisquam, ratione. Vero quod, laudantium labore, sapiente cum totam officiis quasi optio, et harum, ex ipsum vitae quis doloribus possimus tenetur.</p>

    </div>

    <div class="modal-footer">

    <p class="pull-left">Modal Footer</p>

    <button type="button" class="btn btn-default" data-dismiss="modal">CLOSE</button>

    </div>

    </div>

    </div>

    </div>

    <!--/modal windows-->

    <!--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

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 7, 2017

    Not sure, what is the question?

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    jzutter
    jzutterAuthor
    Known Participant
    January 7, 2017

    I am not sure how to make each media size have its own characteristics for each div tag.

    When i change the table or desktop code, the page still shows up in with mobile css code when i have the browser and tablet.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    January 7, 2017

    Have a look at the following, copy and paste into a new document and view in browser. Resize the browser to see the effects.

    <!doctype html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
      body {
            background-color: lightgreen;
      }
      img {
      display: block;
      width: 100%;
      height: auto;
      }
    @media screen and (min-width: 481px) {
        body {
            background-color: green;
      color: aliceblue;
        }
    }
    @media screen and (min-width: 769px) {
        body {
            background-color: greenyellow;
      color: brown;
        }
    }
    </style>
    </head>
    <body>
    <div class="container">
      <div class="row">
      <div class="col-xs-12">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <img class="img-responsive" src="http://dummyimage.com/1200x400.jpg" alt="my banner" width="1200" height="400">
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      </div>
      </div>
    </div>
    </body>
    </html>
    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices