Skip navigation
Currently Being Moderated

Landscape & Portrait in Fluid Grid Layouts

May 14, 2012 11:31 AM

I am quite excited about Fluid Grid Layouts and have seen a few videos on Adobe TV and You Tube.

 

Can anyone tell me if it takes in to account Tablets and Phones being turned into Landscape view from Portrait.

 
Replies
  • Currently Being Moderated
    May 23, 2012 7:17 AM   in reply to Random Sheep

    I was wondering this, too.

     

    I wondered why we only get 3 fluid layouts: Mobile (landscape), Tablet (portrait) and Desktop.

     

    Why not also Mobile (portrait) and Tablet (landscape)?  Or, even allow us to add our own maybe.

     

    Twitter Bootstrap seems to account for all screen sizes/orientations...

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2012 10:53 AM   in reply to Random Sheep
    Can anyone tell me if it takes in to account Tablets and Phones being turned into Landscape view from Portrait.

    Yes, it does with min- and max-widths.

     

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

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    May 28, 2012 12:39 AM   in reply to Nancy O.

    Ah, OK thanks Nancy. However, I presume that in doing it this way the number of columns stays the same for portrait AND lansdscap, which may not be desired? Just a thought.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 20, 2013 9:16 PM   in reply to Nancy O.

    Nancy ~

     

    I know you orriginally wrote this answer almost 9 months ago but I just found it, I do appreciate your help.

     

    I have designed a fluid grid layout and the mobile layout is VERY different than the other layouts, however, when the iPhone 5 is turned to landscape it transistions to tablet layout. 

     

    I am not sure if this is only on the iPhone 5 or other phones too, my wife and I only have iPhone 5s.  Is there a way I can change the following code to accomadate the iPhone in landscape the same as a mobile layout in portrait?

        

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

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 11:07 AM   in reply to RoseCityMktg

    Smartphones are getting bigger while some Tablets are getting smaller. Fluid Grids are not device specific. 

     

    If your Smartphone is as wide as an average Tablet, it will assume the tablet layout. If the Tablet is as wide as a desktop, it will assume the desktop layout. You'll probably see a lot more crossover in the coming years.  I see no problem with this and neither should you.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 21, 2013 11:47 AM   in reply to tcdude

    tcdude wrote:

     

    Ah, OK thanks Nancy. However, I presume that in doing it this way the number of columns stays the same for portrait AND lansdscap, which may not be desired? Just a thought.

    This is actually very true. I feel restricted while using Fluid Grid as I cant design it separately for both tab landscape and tab portrait.

    if I add a media query explicitly and change the Size of view port then also DW updates the CSS under preexisting media types.

     

    A bit more of intelligent behavior would have been gr8.

     
    |
    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