looking for advice on mobile friendly layout for my website

**styxlawyer** · 07-12-2015, 07:41 PM

Originally Posted by molendijk

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

OK, that works now.

**molendijk** · 07-12-2015, 08:36 PM

Originally Posted by james438

My main concern right now is having to do with heights.

James, I think the following will work:
1. Remove the css for #middle;
2. Wrap a div around what you have inside <div class="responsive_div" id=#middle>...</div> and give the wrapper style="background:#ffe4b5; border-radius:10px; color:#000000; padding: 20px". I guess that should do it. So you should end up with something like this

Code:

<div class="responsive_div" id="middle" >
<div style="background:#ffe4b5; border-radius:10px; color:#000000; padding: 20px">
<div style="text-align:center;font-size:32px;">demo
<div style='font-size:14px; font-weight: bold'>written by: <span class='o'>admin</span>
</div>
</div>
<hr><br><span class='o'>Date Written: </span>7/12/15 <span class='o'>Last Updated:</span> // <br><br>This is an article stub.<br><br><b><span class='o'>TAGS:</span></b> <a href="http://www.animeviews.com/display.php?category=misc">misc</a>
</div>
</div>

**Beverleyh** · 07-12-2015, 10:28 PM

Originally Posted by molendijk

So the statement that we don't need a wrapper seems to remain valid.

Sometimes, but it depends on content and/or available container width. Referring to Arie's content, yes, this is true, because there is enough content to expand a table-cell to 33% width.

Going back to what I originally said;

Originally Posted by Beverleyh

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

This original answer was more generic than how it appears to have been interpreted, and was also taking in to account cells with either no or very little content, and wide screens vs narrower screens, where shorter content may fill or not fill a cell depending on device, hence "predictably" and the line "only being as wide as their content needs them to be".

This would demonstrate that behaviour;

Code:

<!DOCTYPE html>
<html>
<head>

<style>
.table { display:table; width:100% }
.td { display:table-cell; width:20%; border:1px solid #000 }
</style>

</head>
<body>

<div class="td"> one </div>
<div class="td"> two </div>
<div class="td"> three </div>
<div class="td"> four </div>
<div class="td"> five </div>
<br/>

<div class="table">
<div class="td"> one </div>
<div class="td"> two </div>
<div class="td"> three </div>
<div class="td"> four </div>
<div class="td"> five </div>
</div>

</body>
</html>

Now the interesting thing is, if you put a lot of content in one of the parent-less table-cells above - enough to predictably fill whatever defined width, regardless of screen size, then ALL the other tables-cells (regardless of their content) will divide the remaining width up amongst themselves and fill the overall container width too.

So to clarify my original point; To get table-cell divs behaving predictably as far as width settings are concerned (and regardless of their inline text content) they also need a wrapper set to display:table; width:100%; Otherwise, you're relying on content (difficult if you're working with user generated content) and/or viewing device/container width (highly variable in responsive design)

**molendijk** · 07-12-2015, 10:30 PM

Originally Posted by james438

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.

What you hear and what you observe yourself are different things. I can imagine a situation in which a person who knows his tables could use them in a responsive design environment. Tables respond well to something like:

Code:

<style>
td {display: table-cell}
td {width: 30%}
td {text-align: left}
img {width: 100%}

@media screen and (max-width: 799px) 
{
td {display: block}
td {width: 100%}
td {text-align: center}
img {width: 40%}
}
</style>

This would work well with 3 td's.

**molendijk** · 07-12-2015, 10:46 PM

Originally Posted by Beverleyh

So to clarify my original point; To get table-cell divs behaving predictably as far as width settings are concerned (and regardless of their inline text content) they also need a wrapper set to display:table; width:100%; Otherwise, you're relying on content (difficult if you're working with user generated content) and/or viewing device/container width (highly variable in responsive design)

True! You convinced me.

**Beverleyh** · 07-12-2015, 10:53 PM

. I can imagine a situation in which a person who knows his tables could use them in a responsive design environment.

Yes, this is true (as far a manipulating element/block behaviour with CSS goes), but when talking about a whole layout, semantics play a more important role, and because of this, tables should only really be used for statistical data.

Take the CSS away for a moment and think about what a search engine spider reads in the markup. The tags used to markup a web document offer structural cues in the way it should interpret the information it finds there. So something like a div points a spider to structure, whereas table, tr, th/td tags set the scene for statistical data.

There's also all the extra tags needed for table based layouts - and browsers need to parse them all (reading to the closing </table> tag) before they can interpret organisational structure and draw it to the screen, making them slower to render than div layouts.

And not forgetting that accessibility can be hindered with table based layouts (quite badly with heavily nested ones).

Saying that, I naughtily use tables for layout now and then o_O especially with forms. In fact, Arie's responsive table demo is pretty much how I handled this contact form http://fofwebdesign.co.uk/contact.php

Of course if what you're laying out and displaying just so happens to be a bus timetable, then Arie's responsive table demo is an excellent example of how to handle tables in responsive layouts

**molendijk** · 07-12-2015, 11:29 PM

Beverleyh, you're absolutely right in all respects. But James seems to be at home with tables and his (original) table structure was not complicated. So this was ment to allow him to go back to tables if he wanted.

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

Thread Tools

Search Thread

Similar Threads

{ Help ] Mobile Friendly Version not working .

Mobile friendly upgrade

Google mobile friendly help

Mobile friendly website

Are ajax website SEO friendly ?

Bookmarks

Bookmarks

Posting Permissions