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.

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

    Fluid Grid layouts are not ideal for what you're trying to do then.

    FGLayouts are a mobile first layout system so everything inherits styles from the mobile CSS code.  That's how it works.   You cannot reorder elements with FGLayouts.  In other words, Div 1 will always be Div 1 on each device.

    I need to mention also that FGLayouts are a legacy feature.  And they no longer exist in CC 2017.  There's a reason for that.  The layouts were very fussy to work with and prone to failure especially if you tried to edit the self generated CSS code.    You really must use a separate CSS file for your custom styles.  And never, ever tamper with the FGLayout CSS.

    If you're not too heavily invested in this project so far, you should probably switch to Bootstrap.  It's infinitely better for making responsive web sites with much more to offer in the way of mobile friendly menus, image sliders, forms, panels, etc.... 

    Bootstrap 3 Tutorial

    Nancy


    I have the whole site built. Im just working on formatting. the different device characteristincs.

    Should i build the site as i have it without using fluid grid layout? Basically by this i mean keep all the coding the same but remove all the fluid hid layout connection?

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