1 Reply Latest reply on Mar 21, 2015 11:01 PM by BenPleysier

    layout breaks when resizing screens even though I'm using fluid grid layout

    any suggestions out there

      Everything resizes good until I get to a screen size tha'ts around a tabet and then there's no css applied I think

       

      here's html:

       

      <body>

      <div class="gridContainer clearfix">

        <div id="div1" class="fluid"><img src="browns logo.jpg"  alt=""/></div>

        <nav class="fluid mainnav"> <ul class="fluid fluidList navlist">

        <li class="navbutton"><a href="ABOUT PAGE.html">ABOUT US</a></li>

          <li class="navbutton"><a href="ROOFINGPAGE.html">ROOFING</a></li>

        <li class="navbutton"><a href="ELECTRICALPAGE.html">ELECTRICAL</a></li>

        <li class="navbutton"><a href="CONTACTUSPAGE.html">CONTACT US</a></li>

      </ul>

      </nav>

       

       

      <div class="fluid content">

        <aside class="ad1" id="ad1"><img src="roofing gun.jpg"  alt=""/></aside>

        <article class="mainarticle">

          <p class="fluid QUOTE">"YOU SHOULD BE ABLE TO TALK TO YOUR CONTRACTOR. A FLUID LINE OF COMMUICATION IS VITAL IN SUCCESSFULLY COMPLETING UPGRADES, RENOVATIONS AND BUILDING PROJECTS. BROWNS ROOFING AND ELECTRICAL PLACES NO PHASE OF A PROFECT ABOVE WHAT WE BELIEVE TO BE THE FIRST PHASE OF ANY SUCCESSFUL PROJECT - QUALITY COMMUNICATION WITH ITS CUSTOMERS."</p>

      </article>

        <aside class="ad2"><img src="tester400x400.jpg"  alt=""/></aside>

      </div>

      <div class="fluid productsdisplay">

        <aside class="roofingaside">

         <header class="roofingheader">AFFORDABLE ROOFING</header>

          <ul class="fluid fluidList roofinglist">

           <li class="fluid rooginglistiteam">NEW ROOFS</li>

           <li class="fluid rooginglistiteam">REPAIRS </li>

           <li class="fluid rooginglistiteam">WINTERIZE</li>

           <li class="fluid rooginglistiteam">24/7 SERVICES</li>

          </ul>

        </aside>

         <aside class="electricalaside">

           <header class="fluid electricalheader">ELECTRICAL SERVICES</header>

            <ul class="fluid fluidList ELECTRICALLIST">

             <li class="fluid ELECTRICALLISTITEAM">INTERIOR & EXTERIOR LIGHTING</li>

             <li class="fluid ELECTRICALLISTITEAM">OUTLETS, SMOKE DETECTORS, DRYER CIRCUITS </li>

             <li class="fluid ELECTRICALLISTITEAM">FANS, A/C CIRCUITS, ELECTRIC HEATING</li>

             <li class="fluid ELECTRICALLISTITEAM">ON CALL SERVICES</li>

            </ul>

         </aside>

          </div>

      </div>

      </body>

       

       

      here's css:

       

      .fluid {

        clear: both;

        margin-left: 0;

        width: 100%;

        float: left;

        display: block;

        margin-top: 0px;

      }

       

       

      .fluidList {

          list-style:none;

          list-style-image:none;

          margin:0;

          padding:0;       

      }

       

       

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

       

      .gridContainer {

        margin-left: auto;

        margin-right: auto;

        width: 100%;

        padding-left: 0%;

        padding-right: 0%;

        clear: none;

        float: none;

      }

      #div1 {

      }

      .mainnav {

        color: #FFF;

        padding-bottom: 5px;

      }

      .navlist {

        color: #FFF;

      }

      .navbutton {

        float: left;

        font-size: 24px;

        text-align: center;

        display: block;

        width: 25%;

        background-color: #FFF;

        color: #FFF;

        text-decoration: none;

      }

      .QUOTE {

      }

      .QUOTE2 {

      }

      .productsdisplay {

        width: 100%;

      }

      .roofingsection {

        width: 50%;

      }

      .electricalsection {

        width: 50%;

      }

      .roofingaside {

      }

      .electricalaside {

      }

      .roofingheader {

      }

      .roofinglist {

      }

      .rooginglistiteam {

      }

      .electricalheader {

      }

      .ELECTRICALLIST {

      }

      .ELECTRICALLISTITEAM {

      }

      .zeroMargin_mobile {

      margin-left: 0;

      }

      .hide_mobile {

      display: none;

      }

       

       

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

       

       

      @media only screen and (min-width: 481px) {

       

       

      .gridContainer {

        width: 100%;

        padding-left: 0%;

        padding-right: 0%;

        clear: none;

        float: none;

        margin-left: auto;

      }

      #div1 {

      }

      .mainnav {

      }

      .navlist {

      }

      .navbutton {

      }

      .QUOTE {

      }

      .QUOTE2 {

      }

      .productsdisplay {

      }

      .roofingsection {

      }

      .electricalsection {

      }

      .roofingaside {

      }

      .electricalaside {

      }

      .roofingheader {

      }

      .roofinglist {

      }

      .rooginglistiteam {

      }

      .electricalheader {

      }

      .ELECTRICALLIST {

      }

      .ELECTRICALLISTITEAM {

      }

      .hide_tablet {

      display: none;

      }

      .zeroMargin_tablet {

      margin-left: 0;

      }

      }

       

       

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

       

       

      @media only screen and (min-width: 769px) {

       

       

      .gridContainer {

        width: 100%;

        max-width: 2000px;

        padding-left: 0%;

        padding-right: 0%;

        margin: auto;

        clear: none;

        float: none;

        margin-left: auto;

      }

      #div1 {

      }

      .mainnav {

      }

      .navlist {

      }

      .navbutton {

        background-color: #00F;

        font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;

        font-size: 36px;

      }

      .QUOTE {

        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

        font-weight: bold;

        text-align: center;

        font-size: 24px;

      }

      .QUOTE2 {

        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;

        font-weight: bold;

        text-align: center;

        font-size: 24px;

      }

      .productsdisplay {

      }

      .roofingsection {

        text-align: center;

        display: block;

        width: 50%;

        float: none;

      }

      .electricalsection {

        text-align: center;

        display: block;

        float: none;

        width: 50%;

      }

      .roofingaside {

        width: 50%;

        float: left;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

        color: #FFF;

        font-style: italic;

        background-image: url(SHINGLE.jpg);

        height: 500px;

      }

      .electricalaside {

        width: 50%;

        text-align: center;

        display: block;

        float: left;

        color: #FF0;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

        font-style: italic;

        background-image: none;

        background-repeat: repeat;

        height: 500px;

        background-color: #0000FF;

      }

      .roofingheader {

        color: #FFF;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

        font-size: 33px;

        font-style: italic;

        font-weight: bold;

        text-align: center;

        padding-bottom: 30px;

        background-image: none;

      }

      .roofinglist {

      }

      .rooginglistiteam {

        list-style-type: none;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

        font-size: 36px;

        font-style: italic;

        color: #FFF;

        text-align: center;

        padding-bottom: 35px;

        font-weight: normal;

      }

      .electricalheader {

        font-size: 36px;

        font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;

        font-weight: bold;

        font-style: normal;

        text-align: center;

        display: block;

        padding-bottom: 30px;

      }

      .ELECTRICALLIST {

      }

      .ELECTRICALLISTITEAM {

        font-size: 24px;

        text-align: center;

        padding-bottom: 30px;

      }

      .zeroMargin_desktop {

      margin-left: 0;

      }

      .hide_desktop {

      display: none;

      }

      }

      .gridContainer.clearfix .fluid.content {

      }

      .gridContainer.clearfix .fluid.content #ad1 {

        float: left;

        text-align: center;

      }

      .gridContainer.clearfix .fluid.content .ad2 {

        float: left;

        text-align: center;

      }

      .gridContainer.clearfix .fluid.content .mainarticle {

        width: 60%;

        float: left;

        line-height: 50px;

      }

        • 1. Re: layout breaks when resizing screens even though I'm using fluid grid layout
          BenPleysier Adobe Community Professional & MVP

          Dump FGL and deploy Bootstrap instead.

           

          Copy and paste the following into a new document and view in your favourite browser.

           

          <!doctype html>
          <html>
          <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta charset="utf-8">
          <title>Untitled Document</title>
          <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
          <style>
          .nav {
              width: 100%;
          }
          .nav > li {
              width: 25%;
              text-align: center;
          }
          </style>
          </head>
          
          <body>
          <nav class="navbar navbar-default">
              <div class="container-fluid">
                  <ul class="nav navbar-nav">
                      <li><a href="aboutus.html">ABOUT US</a></li>
                      <li ><a href="roofing.html">ROOFING</a></li>
                      <li><a href="electrical.html">ELECTRICAL</a></li>
                      <li><a href="contactus.html">CONTACT US</a></li>
                  </ul>
              </div>
          </nav>
          <div class="container">
              <div class="row">
                  <div class="col-xs-12">
                      <img alt="560x280" class="img-responsive center-block" src="http://lorempixel.com/560/280/" style="margin-bottom: 15px;"> 
                  </div>
                  <div class="col-xs 12">
                      <p>"YOU SHOULD BE ABLE TO TALK TO YOUR CONTRACTOR. A FLUID LINE OF COMMUICATION IS VITAL IN SUCCESSFULLY COMPLETING UPGRADES, RENOVATIONS AND BUILDING PROJECTS. BROWNS ROOFING AND ELECTRICAL PLACES NO PHASE OF A PROFECT ABOVE WHAT WE BELIEVE TO BE THE FIRST PHASE OF ANY SUCCESSFUL PROJECT - QUALITY COMMUNICATION WITH ITS CUSTOMERS."</p>
                  </div>
                  <div class="col-md-6">
                      <div class="jumbotron text-center">
                          <h2>AFFORDABLE ROOFING</h2>
                          <p>NEW ROOFS<br>
                          REPAIRS<br>
                          WINTERIZE<br>
                          24/7 SERVICES<br>
                      </p>
                      </div>
                  </div>
                  <div class="col-md-6">
                      <div class="jumbotron text-center">
                          <h2>ELECTRICAL SERVICES</h2>
                          <p>INTERIOR & EXTERIOR LIGHTING<br>
                          OUTLETS, SMOKE DETECTORS, DRYER CIRCUITS<br>
                          FANS, A/C CIRCUITS, ELECTRIC HEATING<br>
                          ON CALL SERVICES<br>
                      </p>
                      </div>
                  </div>
              </div>
          </div>
          
          </body>
          </html>
          

           

          If you are interested, you can learn more here Bootstrap 3 Tutorial.

          1 person found this helpful