Table Cells Instead of Floats

PaulOB · June 10, 2015, 1:05pm

Yes that’s the best place for scripts as it means the content has loaded and the script has something to work on (although the ‘document ready’ scripts can go anywhere). You would also be better externalising those scripts so you can re-use them on other pages easily.

Do you have the superclick plugin in place and the link to jquery before it in the html. Do you also have the sf-menu class on the ul.

<ul id="nav" class="sf-menu">

In my original there was padding-top on the subnav ul to make the space.

#nav li ul {padding:11px 0 0}

valarcher · June 11, 2015, 4:15pm

Hi Paul - I have to go back to that menu later when my brain can face it. Meanwhile returning to this:

.boxtwo {display:table; width:100%; table-layout:fixed;}
.boxlft .boxrgt {display:table-cell}

I can’t figure out a way to tell each table cell where it must display? It was so easy with floats. Cells are such fixed things! e.g. here:

http://dev.greensmoothie.com/

In the second row:

(1) The subscribe in boxlft is in wrong position - I want it to display on the left of its cell-holder about 20-50px away from left side of screen (it’s way over to the right)

(2) the postit note in boxrgt is displaying correctly on the right side of its cell-holder - but I don’t know how, I can’t see anything in the css telling it to do that, it was for ages displaying on the left of its cell-holder, then it suddenly got a mind of its own & popped over to the right.

Is it right to use a table in a case like this, where I want the contents of each cell to be in a specific position vertically & horizontally?

thanks! - Val

DaveMaxwell · June 11, 2015, 5:00pm

You don’t need the floats on either the labels or on the input on that form. Remove them, change the display on the labels to INLINE-BLOCK, and text-align it left. That should give you more of what you want.

PaulOB · June 11, 2015, 5:18pm

You have set .awbox it margin:auto so it will center in the available space of that cell. Just remove the auto and use a margin-left to move it where you want.

This have nothing to do with table-cells

valarcher · June 12, 2015, 1:02pm

Hi Dave - those floats are the code given by aweber. They don’t cause any problems in screen resize. With them, it looks like this:

When I remove them, it looks like this:

valarcher · June 12, 2015, 1:06pm

Hi Paul – margin: 0,auto – oh dear I did it again!!! Failed to see the simple obvious.

(1) Does that box containing the two cells always have to be “table;width:100%” to display correctly on mobile? I recall with my old floats they had to be in a container of 100% width.

(2) Does it have to be “table-layout:fixed”? My impression is that this makes both td’s 50% wide. If I want a td to be 70% width, then do I do what you say - place a margin on the contents of the td (with no margin in mobile)? Then will the td with the bigger margin push the other td over to the right (or left)?

.awhdr {margin-left:80px;width:310px;} /* Get a Free…*/
.awbox {margin-left:80px;width:280px; /enter name/email/

(3) Problem - I’m trying to tell .awhrd & .awbox to have no margin in mobile, with this:

@media screen and (max-width:550px)
{.awhdr,.awbox {margin:0;}}

But when I do that, the browsers lose the formatting (h3 font, box width, etc). What am I doing wrong?

(4) In your menu @media, you have “max-device-width: 480px” and in my table boxes @media I have “max-width:550px”. Should I change that to 480 to match the menu? I’m guessing a breakpoint should be the same across the entire <body>?

I’m getting confused 'cause that max-device is for your textarea, and then in your nav’s it’s just max-width (no device, same as my box) and it varies, but it’s all bigger than 550, e.g. 1020, 793. Do you agree with 550px in my header boxes?

See - http://dev.greensmoothie.com/

thank you! Val

valarcher · June 12, 2015, 1:33pm

In fact, all the browsers keep on losing the css formatting in that left box, then sometimes get it back again when I repeatedly click refresh. It’s nothing to do with @media.

I don’t have that problem on localhost using all browsers, just when I upload it to the server. Do you perhaps know why the server is causing problems? Is it anything to do with me having an older version of php on localhost?

But it happens only with boxlft. The other boxrgt all the browsers display correctly on both localhost and server. Perhaps something’s wrong somewhere in this code:

css:

.boxsub{display:table;width:100%;table-layout:fixed;}
.boxsub .boxlft,.boxsub .boxrgt{display:table-cell;vertical-align:top;}
@media screen and (max-width:550px)
    {.boxsub,.boxsub .boxlft,.boxsub .boxrgt{display:block;}}
.awhdr{margin-left:80px;width:310px;}
/*@media screen and (max-width:550px)
    {.awhdr {margin:0;}}*/
.awhdr h3{margin:0 0 12px;font:bold 1.1em "Comic Sans MS",sans-serif;color:#f00251;text-align:left;}
.awhdr h3 a{font:0.8em Arial,sans-serif;}
.awhdr h3 a:link,.awhdr h3 a:visited,.awhdr h3 a:active{color:blue;text-decoration:underline;}
.awhdr h3 a:hover{background:#fff;color:#f00251;text-decoration:none;}
.awbox{margin-left:80px;width:280px;padding:12px;background:#f2ffdf;border:1px solid green}
/*@media screen and (max-width:550px)
    {.awbox{margin:0;}}*/
.awbox .awsub{width:100%;text-align:center;}
.awsub label{float:left;width:20%;font:13px Verdana,sans-serif;color:black;text-align:right; padding-right:2px;}
.awsub .label1{margin:2px 0 0;}
.awsub .label2{margin:14px 0 0;}
.awsub input[type="text"] {padding:2px 4px;}
.awsub .input1,.awsub .input2{float:right;width:75%;border:1px inset #ccc;}
.awsub .input1{margin:0;}
.awsub .input2{margin:8px 0 0;}
.awbox .submit{clear:both;margin:10px auto 0;padding:4px 12px;background:#ffffa0;font:13px Arial,sans-serif;}

html:

<div class="boxsub">
    <div class="boxlft">
        <div class="awhdr"><h3>text</h3></div>
        <div class="awbox">
<form method="post" class="aw" action="http://www.aweber.com/scripts/addlead.pl">
<input type="hidden" name="listname" value="[listname]" />
<input type="hidden" name="redirect" value="" />
<input type="hidden" name="meta_redirect_onlist" value="" />
<input type="hidden" name="meta_required" value="email" />
            <div class="awsub">
<label for="name" class="label1">Name:</label>
<input type="text" name="name" value="" class="input1" />
<label for="email" class="label2">Email:</label>
<input type="text" name="email" value="" class="input2" />
<input type="submit" name="submit" class="submit" value="Click to Subscribe--Send My Free Classes" />
            </div>
</form>
        </div>
    </div>
    <div class="boxrgt postit"><?php include(TEMPLATEPATH . '/1cde/postit.php'); ?></div>
</div>

PaulOB · June 12, 2015, 9:35pm

The display:table property acts the same as a normal table and if you don’t give it a width then its cells whether one cell or 10 cells will just hug the content as required. If you give the table a 100% width then it takes up the available space and the cells stretch across the 100% width as there is no such thing as half a cell.

Whether or not you give your table a width depends on what you are trying to achieve. If you want two variable width elements side by side then no width on the table is required unless you want the table to actually span the whole width.

The benefit of table-cells is that you don’t need to clear them, you get automatic equal height columns and any vertical alignment that you require.

Table-layout:fixed tries to make the cells equal width if there are no widths applied. If you apply a width to one cell then it should be honoured. There’s no need to give widths to all cells.

Table-layout:auto will adjust the cell width depending on which cell has most content.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.table {
	display:table;
	width:100%;
	max-width:960px;
	margin:10px auto;
}
.cell {
	display:table-cell;
	border:1px solid #000;
}
.table1 {
	table-layout:fixed;
}
</style>
</head>

<body>
<div class="table table1">
		<div class="cell cell1">Cell1 with longer content to test what happens Cell1 with longer content to test what happens</div>
		<div class="cell">Cell2</div>
</div>
<div class="table table2">
		<div class="cell cell1">Cell1 with longer content to test what happens Cell1 with longer content to test what happens</div>
		<div class="cell">Cell2</div>
</div>
</body>
</html>

Most times you can just test and see which works best for you by adding table-layout:fixed or removing it.

The breakpoint should be relative to the design element you are working width as not al elements need to suddenly change. A menu may become too small at a certain width so apply the media query there at that width. Another element may be fine until much later and would need a different breakpoint.

I couldn’t see what you meant exactly?

I can’t see what you mean? It sounds like a cache issue your end though. You should disable cache when testing and building to avoid issues like that anyway.

You lost me:)

The width that your media queries trigger is the width at which your elements don’t fit. If you close the window and elements overlap then add a media query to those elements before that happens. There is nothing special required. For example you would just change the display:table-cells to display:block before the content overlaps and then it will line up vertically.

If you just keep looking at your page and open and close it becomes apparent what elements need to be fixed. Don;t overdo it but a few well placed media queries will work wonders.

valarcher · June 13, 2015, 7:15am

Hi Paul - thanks million. It was cache problem, I googled how to disable when testing. Never knew to do that!

Thank you for detailed info on tables + media queries

(1) Is this correct – to display my subscribe box more to the right on big screens, but against left margin on phones:

.awhdr{margin-left:80px;width:310px;}
@media screen and (max-width:550px)
    {.awhdr {margin:0;}}

(2) > table-layout:fixed tries to make the cells equal width
> table-layout:auto will adjust the cell width depending on which cell has most content

So in fact I should always use auto when I want two cells side-by-side, and only use fixed when I want to specify a width on one cell? So this is wrong:

.boxtwo {display:table; width:100%; table-layout:fixed;}
.boxlft .boxrgt {display:table-cell;}

It should be table-layout:auto?

(3) If I do want a width on one cell, will it be this?

.boxlft .boxrgt {display:table-cell;}
.boxlft {width:70%;}

(4) >I couldn’t see what you meant exactly?

You have:

textarea{resize:vertical}
/* Prevents Mobile Safari from bumping up font sizes in landscape */
@media only screen and (max-device-width: 480px) {
    body{
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    }
}

So I asked is 550px correct in my "@media screen and (max-width:550px)" or should I rather choose 480px as my default break-point on menu and 2 table-cells side-by-side? And then as you say, test the element to see if it can handle a bigger breakpoint?

(5) Or what would be 3 good default break points? To handle (a) 22"-24" monitor, and (b) tablet, and (c) phone? I’m looking at this page:

(6) >max-width:960px

So “width:100%” is wrong? I should limit the width of the table so it won’t expand horizontally too much on very big screens?

(7) For wrapper, is there a best max-width? So on the rest of the page (that is, outside of wrapper) you’ll just see its bgcolor (or image).

I’m thinking instead of this:

body{line-height:1;background:#e5ffbf;margin:2% auto;font-size:100%;}
#wrapper{width:97%;margin:0 auto;}

I should have something like this:

#wrapper{max-width:1920px;margin:0 auto;} /*for 22-24" monitor & bigger screens*/
    @media screen and (max-width:750px) {#wrapper {width:750px;}} /*for tablet*/
     @media screen and (max-width:320px) {#wrapper {width:320px;}} /*for phone*/

I’m very grateful for your help Paul because once I’ve got this table-instead-of-floats thing sorted out, I can repeat it anywhere in the template & content.

thank you! - Val

valarcher · June 13, 2015, 8:04am

Hi Paul - I tested it as per “If you close the window and elements overlap then add a media query to those elements”

(1) Here’s how it looks at full-screen:

(2) Here’s how it looks reducing the screen a little – in the first table, the icons drop into a second line in their cell (boxrgt).

BUT in the 2nd table, the two elements overlap (boxlft + boxrgt).

(3) Here’s how it looks reducing the screen to iphone - in the first table, boxrgt has correctly dropped below boxlft. And ditto for second table.

So I switched it to “table-layout:auto;” and that stops (2) - they no longer overlap BUT the text does not fit into the postit image. It ignores the image dimensions and changes the width of the image.

Why is it NOT obeying:

.postit{background:url(imgpg/postit.png) no-repeat;width:300px;height:170px;}

Is it because the image is in the css, and if I move it into the html - make it the same as logo:

<div class="boxlft logo"><img src="<?php 
bloginfo('template_directory'); ?>/imgpg/logosm.gif" 
alt="greensmoothie" width="310px" height="70px" /></div>

then it will all work okay? I know I can test it, but I just want to confirm that this is true. You can no longer (with responsive) define images in the css?

If so, then does that mean I can no longer (with responsive) have a blank image in the css and its text content in the html? The text must be in the image itself – that is, every time I want to change the text, I must create a new image with the text pre-written into it?

That will be a drag, especially as I don’t know how to use image s/ware except to crop or resize an image. I used to be able to do this with the float:

<div class="postit"><?php include("$rpath/1cde/postit.php"); ?><?php echo $select; ?></div>

where it would randomly select different text content for the blank postit note.

thanks! - Val

PaulOB · June 13, 2015, 10:01am

No, you used fixed when you don’t want content to dicate the width. You can apply widths in both modes but they may behave differently depending on content (or they may display the same). You just have to test and see:)

If you want a width on a cell then usually you would use the fixed algorithm to make sure. Tables always try to hold their content but fixed forces them to use the measurements you gave. Just look at my example to see the differences and play around with it. Most times don’t sweat it - just test either and see what works best in the situation you have.

Forget about devices altogether. (That 480px rule in my example is not really anything to do with the design but about a device that has a problem bumping up text size in landscape. To be honest its not really an issue as long as you are using the correct viewport meta tag.)

Just concentrate on your design and forget devices as I have said a few times now. Your 550px is incorrect because your elements overlap at 700px so the media query should address that problem for that part of the design.

e.g.

@media screen and (max-width:720px){
	.boxsub .boxlft,
	.boxsub .boxrgt{
	display:block;
	margin:20px auto;
	}
	.awhdr,.awbox {margin:auto}
}

Where possible don’t use fixed widths and try to use percentages so that boxes can stretch. Sometimes you may want a fixed width but other times you may want the box to flex.

Forget devices. Forget preset breakpoints. They won’t match your design. Make up your own breakpoints based on your design.

That depends on your design. You may want a wide page.

Generally though its good not to let lines of text stretch very wide or they become unreadable. I usually set a max-width of about 1200px but it does depend on the design. If its a single column then 960px would be fine.

What other result could there be. You have a fixed width element inside a container that is not big enough!

You should have wrapped to a new line before this happened by using media queries as in the code I have given above.

Or you make both elements flexible (not 300px width) but there will still be a point when they don’t fit. Putting content on fixed width image is never a good design choice because you can’t really scale them. It’s ok for small snippets and ok for your post it note as long as you keep the element small enough to work in the smallest mobile (320px approx so the element should be around 300px max).

What you can also do is that at the window gets smaller you could remove the background image and just use a background colour with shadow for the smaller device. Things don’t have to look the same.

You should never really used fixed height and width images as backgrounds to your content. You need to slice then so that they scale nicely. You can use background-size:cover these days but won’t work nicely for intricate images.

valarcher · June 13, 2015, 2:01pm

Hi Paul - oh that’s really good - thank you!

(1) How on earth did you know it’s overlapping at 700px? I just know how to resize window in FF using webmaster tools, and then I push the screen in + out with my cursor in the bottom right. When it shows overlap, I have no idea what width I’m at. In Chrome I don’t know how to resize screen (I can’t see anything in their built-in tools).

(2) How do I stop the logo moving over into the center as I slowly widen the screen?

I tried adding text-align:left to .logo but that didn’t work.

(3) How do I force a space between the two images in .boxsub? Moving the screen from small to bigger, I want boxrgt to pop up next to boxlft only when there’s 20px space between them. Otherwise it looks cramped like this:

(4) To lose the 80px left margin, I had to do this:

@media screen and (max-width:720px)
    {.awhdr,.awbox {margin-left:0;}}

because it didn’t respond to “.awhdr,.awbox {margin:auto}” - which I know is silly because 0 and auto are the same thing! But with auto, it kept the 80px on the left in phone mode, and with margin-left:0 it goes right up against the left edge.

(5) “background-size:cover” didn’t work, it stretched the image out and lost its shadow. But as you say, since it’s a simple (not intricate) image of 300px, I can continue to use background url with width + height. And happily re-write the text whenever I want.

(6) For #wrapper, is there a best max-width? So on the rest of the page (that is, outside of wrapper) you’ll just see body bgcolor? You got me worried with your media=“screen, projection”

I have this:

#wrapper{width:97%;margin:0 auto;}

But maybe I should change to this:

#wrapper{width:97%;max-width:1200px;margin:0 auto;}

It’s ironic. In the 1990’s I had all my images+text content in tables, eg image on left, text on right, or image-left/image-right with colspan=“2” for text spanning beneath both, or rowspan=2 etc. It was simple + easy to get them aligned, caption in right position, etc. Then in about 2007 I came here to re-design my site for mobile. And I was told to change all the image+text into floats (e.g. float image on left, float text on right). And it was really hard to get everything aligned right. In fact, for many pages I didn’t even try because floats were too difficult. I left them in tables, e.g. this one:

http://greensmoothie.com/sprout/faq.php – scroll down to “How Does the Sprouter Get Water?”

Now in 2015 I’m being told everything should go back into table’s! I don’t mind here in the template, it’s just a few rows. But I’m thinking of more than 100 pages of content with lots of image-text couplets that I switched to floats and now should switch back to tables! Weep…

Latest is now at: http://dev.greensmoothie.com/

thank you! - Val

PaulOB · June 13, 2015, 9:44pm

In Chrome right click somewhere on the page and from the context menu select “Inspect element”. The web tools menu will then open given you access to the css and html. If you now drag the edge of the browser window smaller you will see in the top right of the browsers the screen dimensions. In Firefox I use firebreak.

You’ve set it to margin auto n your 720px media query which means it will remain centred. Fir small width like that it is probably better centred anyway. I generally center element when I get down to one small column. Just remove the margin auto if you don’t want it centred.

Just put some right padding on the left cell (or left padding on the right cell) but remember to remove the padding when the smaller media query kicks in.

Margin:0 auto will centre block elements that have a width defined. Margin:0 will not center anything. Zero and auto are not the same thing although they may seem to be at times.

As I mentioned before I generally go for about 1200px max-width. 97% width is enormous on my 27" imac and lines are impossible to read at that width. Just find a width that is suitable to your design. (Bootstrap uses a 1170px max-width.)

You misunderstand completely:) HTML Table are only for tabular data. On the other hand the css display:table properties infer no semantics on the page and you can use them to mimic some of the behaviour that tables provided, This doesn’t mean you need to drop floats completely (although you probably could) but when you need the intricate vertical alignment of elements and equalising column effect then the display:table properties make life much easier. It’s just another tool in the box.

You are making it sound harder than it is but all your alignment issues so far have had little to do with the display:table properties but the way that you have used margins, widths and auto margins. The table-cells are just containers and you still need to align your content as required.

You do need to plan your content and choose the best layout to suit your design. For the email box and postit note I would have made them larger and in percentages so that they scale up a and down and not just one box at one end and another box at the other end.

valarcher · June 14, 2015, 8:51am

Hi Paul - when I saw how that postit popped up as a whole independent element as I increased the screen, I really understood you re ignore body, and target the elements.

But I can’t get that screen dimensions working. In firebreak it stays at 1024 (my screen size) no matter what I resize it to, and no matter whether I use my cursor or their alt-shft-<–. In Chrome I can’t see any screen dimensions – can you? :

You’ve set it to margin auto

Yes! I realized in my sleep last night to look for that darn auto.

put some right padding on the left cell

That works! Although I’m surprised because I thought a big padding inside-right of subscribe box would alter the position of hdr text, but it doesn’t. In fact, I was so convinced it would, that I first tried margin but then the hdr vaporized totally.

Bootstrap uses a 1170px max-width

Thanks! I’ll add max-1200px to wrapper.

and not just one box at one end and another box at the other end

I didn’t realize they’re displaying like that because my monitor is only 19" – 1024x768.

For the email box and postit note I would have made them larger and in percentages so that they scale up a and down

OH NO!! No! No! I thought I was all done and could begin on Menu tabs today I need a Downton Abbey fix…

I love the idea of subscribe box being larger. But postit I’m happy with it staying under the soc.media icons & search box. If I start messing with postit, then I’ll probably have to get a bigger image made, and write the text in the image not in the html, and all that hassle…

But subscribe filling the screen is cool on say a 27" screen or TV. I’d love to do that!

Looking at this page – http://reeddesign.co.uk/test/points-pixels.html – I tried this:

I changed:

.awhdr{margin-left:80px;width:310px;}

into:

.awhdr{margin-left:490%;width:2000%;}

and I couldn’t see any hdr text on the screen any more! I know a width bigger than a 100% doesn’t make sense, but that’s what s/he’s got at /points-pixels.html.

Please are you possibly able to change this into percentages for me?

.boxsub{display:table;width:100%;max-width:1200px;table-layout:auto;}
.boxsub .boxlft,.boxsub .boxrgt{display:table-cell;vertical-align:top;}
.boxsub .boxlft{padding-right:30px;}
@media screen and (max-width:720px)
    {.boxsub .boxlft,.boxsub .boxrgt{display:block;margin:10px auto;}
    .boxsub .boxlftt{padding-right:0;}}
.awhdr{margin-left:80px;width:310px;}
/*.awhdr{margin-left:490%;width:2000%;}*/
.awhdr h3{margin:0 0 12px;font:bold 1.1em "Comic Sans MS",sans-serif;color:#f00251;text-align:left;}
.awhdr h3 a{font:0.8em Arial,sans-serif;}
.awhdr h3 a:link,.awhdr h3 a:visited,.awhdr h3 a:active{color:blue;text-decoration:underline;}
.awhdr h3 a:hover{background:#fff;color:#f00251;text-decoration:none;}
.awbox{margin-left:80px;width:280px;padding:12px;background:#f2ffdf;border:1px solid green;}
@media screen and (max-width:720px)
    {.awhdr,.awbox {margin-left:0;}}
.awbox .awsub{width:100%;text-align:center;}
.awsub label{float:left;width:20%;font:13px Verdana,sans-serif;color:black;text-align:right; padding-right:2px;}
.awsub .label1{margin:2px 0 0;}
.awsub .label2{margin:14px 0 0;}
.awsub input[type="text"] {padding:2px 4px;}
.awsub .input1,.awsub .input2{float:right;width:75%;border:1px inset #ccc;}
.awsub .input1{margin:0;}
.awsub .input2{margin:8px 0 0;}
.awbox .submit{clear:both;margin:10px auto 0;padding:4px 12px;background:#ffffa0;font:13px Arial,sans-serif;}

thank you for your kind help – Val

valarcher · June 14, 2015, 9:00am

and not just one box at one end and another box at the other end

Should I also do an @media that tells boxlogo and boxsub to have a bigger margin on the right if the screen is bigger than [n]"? So they’d move over to the left and not be right up against the right-hand edge of the screen on big screens?

If so, what would be a good px or % for [n]? I can’t test it on my screen. If I try resize even to 1280x800 (from my max 1024x768) I can’t see the right side and there’s no horizontal scroll bar.

PaulOB · June 14, 2015, 10:06am

The numbers appear when you start to drag the right edge of the browser window (they disappear when you stop dragging). Don’t have your browser maximised it or you won’t be able to resize it.

That’s not going to work. Magic numbers like that are a waste of time and bad practice.

I’d start with something like this:

#wrapper{
max-width:1200px;
margin:auto;
width:auto;
}

body{padding:0 10px}
.awbox,.awhdr{ 
margin:0;
width:auto;
}
.awbox{max-width:600px}

#container{
margin:0;
}

.boxlft{padding:0 20px 0 10px;}
.awhdr h3 a{white-space:nowrap}

This refers to this page.

The above code are over-rides as I didn’t have time to trawl through the css but will give you the general idea.

Try to avoid fixed widths all the time. Use a max-width if you don’t want anything to get too big but let it scale otherwise.

RyanReese · June 14, 2015, 11:06am

Lauto? .

valarcher · June 14, 2015, 12:15pm

I even googled margin:Lauto to see what it is

PaulOB · June 14, 2015, 2:36pm

Its a new css property

Sorry - just my bad typing again.

valarcher · June 14, 2015, 2:53pm

Hi Paul - wow, that width:auto with a max-width is so cool for the subscribe box. Thank you!

Only thing I had to add with it, is a min-width & height on the postit container. I left it as table-layout:auto; because it works – maybe it’s the “min-” that gets auto to work and if I’d just had “width” then it would’ve needed layout:fixed…

.boxsub .boxrgt{min-width:300px;min-height:170px}/*size of postit image*/

.awhdr h3 a{white-space:nowrap}

I love that unique touch, thank you! And I reduced it to 2 words “Read more…”

Try to avoid fixed widths

Got you. I went thro’ css to make sure it’s not there.

they disappear when you stop dragging

got it! I can see the breakpoint now in Chrome. Thanks million. I’ve also just discovered the “View Responsive Layouts” option in FF’s web dev tools.

It’s all working perfectly now. I’m going for my Downton Abbey fix and will tackle the next row - menu tabs - tomorrow! in a new topic…

[See final here][1].

Thanks for patiently hanging in there with me, you must tear your hair out sometimes at how I don’t see the obvious. But it’s only obvious after you’ve pointed it out, like someone showing you a tiny flower when you’re hiking – Val
[1]: http://dev.greensmoothie.com/