Page 3 of 4 FirstFirst 1234 LastLast
Results 21 to 30 of 37

Thread: looking for advice on mobile friendly layout for my website

  1. #21
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Here is a great round-up of the most common (floats, block) and emerging (flexbox) methods for responsive grid layouts http://www.sitepoint.com/easy-respon...-grid-layouts/ pros and cons are listed so this article makes it quite easy to decide what's best in what situation.

    Until flexbox gets better support, I would still tend to stick with floated block-level divs, with box-sizing:border-box; to allow padding blocks without adding to their widths. Occasionally I use table-cells but it depends on content.

    table-cell has its merits (equal height columns and vertical-alignment) but you should be aware of the specs and how they work in order to manipulate them effectively. To get table-cell divs behaving predictably as far as width settings are concerned, they also need a wrapper set to display:table; width:100%;. Without it, a width setting has no effect and the table-cells will collapse, only being as wide as their content needs them to be (and 3 adjacent table-cells, each set to 33% width or min-width, will not occupy equal space).

    One thing I can't stress enough is to let your content dictate layout. Use a media query breakpoint only when your content needs it.
    Last edited by Beverleyh; 07-12-2015 at 01:11 PM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  2. #22
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by Beverleyh View Post
    ... table-cell has its merits (equal height columns and vertical-alignment) but you should be aware of the specs and how they work in order to manipulate them effectively. To get table-cell divs behaving predictably as far as width settings are concerned, they also need a wrapper set to display:table; width:100%;. Without it, a width setting has no effect and the table-cell will collapse, only being as wide as its content needs it to be (e.g. 3 adjacent table-cells, each set to 33%, will not occupy equal space).
    Are you sure, Beverleyh? In the demo I referred to in my last post, there's no such wrapper. Yet, the cells have equal horizontal space.

  3. #23
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Are you sure, Beverleyh?
    Yes, I'm completely sure that a parent wrapper with display:table; width:100%; is needed in order for child display:table-cell; elements to respect width settings.
    See the specs for further info http://www.w3.org/TR/CSS2/tables.htm...d-table-layout

    In the demo I referred to in my last post, there's no such wrapper. Yet, the cells have equal horizontal space.
    No, unfortunately they don't have equal horizontal space. They are as wide as their content needs them to be (the images are creating width). Take the images out and the columns will collapse equally.
    Last edited by Beverleyh; 07-12-2015 at 02:22 PM. Reason: Specs link added
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. #24
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    I removed the images. The columns continue to have equal horizontal space. Demo here.
    Code:
    Code:
    <!doctype html>
    <html >
    
    <head>
    
    <title>Divs next to each other</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
    body {font-family: verdana; font-size: 14px; padding: 10%; padding-top: 10px}
    .responsive_div {display: table-cell; min-width: 33.333%; margin-bottom: 0; padding-left: 10px; padding-right: 40px; border: 1px solid black}
    
    
    @media screen and (max-width: 899px) 
    {
    .responsive_div {display: block; margin-bottom: 17px; padding-right: 0; border:0}
    
    }
    
    
    </style>
    
    </head>
    
    <body>
    
    <h2 style="text-align: center">Responsive; 3 columns</h2>
    <br>
    
    
    
    <div class="responsive_div" style="border-right:0">
    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. 
    <br>
    <br>
    Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    </div>
    
    <div class="responsive_div" style="border-right: 0">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
    <br>
    
    <br>
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    </div>
    
    <div class="responsive_div"  >
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. 
    <br>
    
    <br>
    Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
    </div>
    
    
    </body>
    
    </html>

  5. #25
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    To see what I mean, you could also go to http://www.w3schools.com/cssref/tryi...display_inline. Replace
    Code:
    p {display: inline;}
    with
    Code:
    p {display: table-cell; min-width: 20%; border: 1px solid black}
    then give the paragraphs different content. Result: cells having equal horizontal space.

  6. #26
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    Quote Originally Posted by molendijk View Post
    To see what I mean, you could also go to http://www.w3schools.com/cssref/tryi...display_inline. Replace
    Code:
    p {display: inline;}
    with
    Code:
    p {display: table-cell; min-width: 20%; border: 1px solid black}
    then give the paragraphs different content. Result: cells having equal horizontal space.
    I just tried that in Opera and the column widths adjust to the width of the content. The "min-width:20%;" token appears to be ignored as the cells will reduce to a single character.

  7. #27
    Join Date
    Jan 2007
    Location
    Davenport, Iowa
    Posts
    2,194
    Thanks
    96
    Thanked 100 Times in 98 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    One thing I can't stress enough is to let your content dictate layout. Use a media query breakpoint only when your content needs it.
    Can you elaborate on that? A little later I will try to look at box-sizing:border-box; and your reference link you posted.

    My main concern right now is having to do with heights. Here is my new demo page that I am working with

    http://www.animeviews.com/test2.php?ID=291

    Here is how it should look:

    http://www.animeviews.com/article.php?ID=291 The middle content stretches to the height of the tallest div.

    When I first started working on my website I used tables for my layout. After that I abandoned the idea of getting my website to do table gymnastics in order to get my website to behave the way I wanted and moved to a css layout. What I had heard was that tables were good for working with tables, but was not often a good idea for website layout and floats and whatnot were better.

    I'm happy to go back to the table layout if that is what is needed. I am beginning to see some of the things that you can do with tables, but I am more used to floats.

    styxlawyer, I am not getting the same results in my Opera browser. The cells shrink to a single word as opposed to a single character. Are you using the current version of Opera or 12.x?
    Last edited by james438; 07-12-2015 at 06:51 PM.
    To choose the lesser of two evils is still to choose evil. My personal site

  8. #28
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,876
    Thanks
    49
    Thanked 264 Times in 256 Posts
    Blog Entries
    56

    Default

    Quote Originally Posted by styxlawyer View Post
    I just tried that in Opera and the column widths adjust to the width of the content. The "min-width:20%;" token appears to be ignored as the cells will reduce to a single character.
    I made a mistake both in my demo and my reference to w3schools. I forgot the width. We should not only have min-width: 20% (width 5 columns), but also width: 20%. With 3 columns, we would have min-width: 33.33% and width: 33.33% etc. (But just using min-width works in Firefox).
    So the statement that we don't need a wrapper seems to remain valid.
    James, this works here with Opera too (if we don't forget the width).

  9. #29
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    Quote Originally Posted by james438 View Post
    .
    .
    styxlawyer, I am not getting the same results in my Opera browser. The cells shrink to a single word as opposed to a single character. Are you using the current version of Opera or 12.x?
    I'm using Opera 30.0.1835.88 (64-bit) on Windows 8.1.

    I guess a single word is the same as a single character if it's only a one character word! My point was that it's not holding to a minimum width of 20%, which it should be doing according to the CSS.

  10. #30
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    One thing I can't stress enough is to let your content dictate layout. Use a media query breakpoint only when your content needs it.
    Can you elaborate on that? A little later I will try to look at box-sizing:border-box; and your reference link you posted.
    No problem - these guys do it better than I ever could;
    - https://developers.google.com/web/fu...se-breakpoints
    - http://www.smashingmagazine.com/2014...ture-websites/
    - http://responsivedesign.is/articles/...ic-breakpoints
    Last edited by Beverleyh; 07-12-2015 at 07:48 PM. Reason: Direct links provided
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. { Help ] Mobile Friendly Version not working .
    By Akhiltheblogger in forum PHP
    Replies: 2
    Last Post: 05-30-2015, 07:41 PM
  2. Mobile friendly upgrade
    By theremotedr in forum CSS
    Replies: 12
    Last Post: 04-07-2015, 08:58 AM
  3. Google mobile friendly help
    By theremotedr in forum General Paid Work Requests
    Replies: 4
    Last Post: 03-24-2015, 06:56 AM
  4. Mobile friendly website
    By rohitnarang12 in forum Other
    Replies: 2
    Last Post: 11-10-2010, 01:28 PM
  5. Are ajax website SEO friendly ?
    By ish1301 in forum JavaScript
    Replies: 2
    Last Post: 09-26-2006, 11:14 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •