Skip navigation
Currently Being Moderated

Fluid Grid

Feb 10, 2013 3:00 PM

Hi everyone. I have setup a fluid grid design, using the default fluid grid design that is in Dreamweaver CS6. How ever, i have changed those media quires to other sizes and added a couple. Now i am unable to resize my fluid grid div tags. Am i not able to add additional media quires or do i have to stick with the 3 that dreamweaver has pre setup?

 

Byron

 
Replies
  • Currently Being Moderated
    Feb 10, 2013 3:31 PM   in reply to brex2040

    You may tweak the code, but you must be careful not to break it.  Double curly brackets are a necessary part of FGLayouts.  Without them the media queries don't work.

     

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

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

    .gridContainer {

    width: 90.675%;

    padding-left: 1.1625%;

    padding-right: 1.1625%;

    }

    #LayoutDiv1 {

    clear: both;

    float: left;

    margin-left: 0;

    width: 100%;

    display: block;

    }

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 10:44 AM   in reply to brex2040

    Sorry, but I'm lost as well.

     

    Fluid Grid Layouts in DW are designed to work off the mobile layout first, then tablet, then desktop.  If you try to deviate from that system by designing for desktop first,  it will fail.

     

    I'm the first to admit that DW's FGL feature is not perfect & needs much improvement.  But if you understand its limitations and use it the way it was intended, it will save you from having to manually code your responsive layout. 

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 1:37 PM   in reply to brex2040

    So if I dont start with mobile or remove it or change it, it will break it.

    Yes.  Because everything else is based on that primary mobile style. 

     

    Just curious, why do you want to exclude smartphones?  They represent a big number of internet users.   Having a Responsive layout that adapts to smaller devices is a big plus, no?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 2:29 PM   in reply to brex2040

    Just to clarify,  Mobile = Smartphone portrait and landscape.  By removing the Mobile layout, you're essentially killing it for Smartphones.

     

    Below is a live example of what DW's Fluid Grid Layout looks like. 

    View source to see the code.

    http://alt-web.com/FluidGrid/Fluid.html

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 2:47 PM   in reply to brex2040

    That FGL is DW's default code.   My content styles are in a separate style sheet.

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 4:04 PM   in reply to brex2040

    I recommend using boilerplate.css, respond.js, fluidGrid.css and your own custom style sheet for content.  You may also need an IE-only.css but respond.js & boilerplate usually cover most bases for you.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 11, 2013 5:21 PM   in reply to brex2040

    Based on what you want to do and the number of breakpoints you want to

    have, you should develop your own CSS. Frameworks and grids are best for

    people incapable of writing CSS. Using the respond script is typically a

    waste. Write your own media queries and don't worry about old desktop

    browsers. Take this advice and you'll thank me someday

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points