Add device-width to non-responsive pages?

HTML & CSS
1

Hi – on this page it’s not mobile responsive because of the floating leaves etc:

http://greensmoothie.com/subscribe/

Is there any point in putting this in the header:
<meta name="viewport" content="width=device-width" />

or this:
<meta name="viewport" content="width=device-width, initial-scale=1">

Or will that just mess things up? e.g. now on my iphone if I tap the hamburger in the left of the browser window, I get the text content only of the page – no head, no leaves, no btmnav, etc. I don’t want to confuse safari or any other browser by telling it that it’s responsive when it’s not.

But I would like the header area to display more clearly on mobile phones. Right now it’s tiny text you can’t read. The right-hand cells don’t drop below the left, as I’m hoping they will if I add device-width to header.

It’s so complicated to test, because this is a wordpress page sharing header.php with tons of other pages, that it’s easier for me to ask the question here in the hope someone might know a global answer for all browsers.

thank you! - Val

2

I would add:-

While the page is not fully responsive, it is not far off, there are just a few elements that are letting you down.
It may not be that bigger job to make it fully responsive. Adding the viewport metatag is your first step to that.

3

This is an article I wrote, which miight clear up what the meta viewport tag is / what it does.

4

Hi Ryan - thank you! It’s what Paul always says to me “well targeted media queries” - target specific elements. But are you saying it should be this (omitting device-width)?

<meta name="viewport" initial-scale=1">

thanks, Val

5

No, do use the metatag as shown earlier:

<meta name="viewport" content="width=device-width, initial-scale=1">

But don’t use device-width in your media queries, use width (max-width or min-width) instead.
You are not the first to be confused by this.

1 Like
6

Nope - the whole article didn’t apply to your situation (as it mainly talks about device-width media queries, e.g. max-device-width) but there were sections in that article explaining the viewport meta tag.

7

Hi Sam - oh I see, thank you!

8

While the page is not fully responsive, it is not far off, there are just a few elements that are letting you down. It may not be that bigger job to make it fully responsive. Adding the viewport metatag is your first step to that.

It didn’t work - entering this in the header

<meta name="viewport" content="width=device-width, initial-scale=1">

Because the rest of the page isn’t mobile responsive, it threw it all out - on iphone displays about 2 words a line in text area, images go outside screen, h1 goes outside text area, etc.

I wish it were just a few elements!! I wish there were an easy way to make it mobile since I’ve got such a perfect mobile-responsive head area (logo, subscribe, etc). And Paul also did me a mobile menu for it, waiting in the wings.

But it’s those leaves that are throwing everything out. It looks to me that I have to painstakingly transfer everything over page-by-page into a new mobile-responsive template. Which means I’ll be lucky if my site goes mobile before we reach the end of time… weep… Don’t know when I’ll find the time to transfer every page into a new template.

If anyone can see an easy way to get rid of those leaves and tell the text area to limit itself to I guess 1200px (or what’s the maximum length a line of text should be?) I’d be very grateful to hear a solution

Thanks! Val - http://greensmoothie.com

9

Can’t you just select their classes and hide them display: none; in a query?
And reduce the padding on the text box.

10

To follow the previous rushed response:-

Just take it one step at a time. Start at the top and deal with each problem element in turn.
On the small screen, lose the leafy borders, they eat too much space.
set #rightcol, #leftcol and #leaftop to display: none;
Reduce the huge margins on Content
.txtbox has loads of side padding, reduce that to a much smaller value.
The h1 .wp is over padded too, reduce that.
Needless to say, do all this in one of the media queries to only affect the small screen.
I know this is not everything, but like I said, take it one step at a time, it will be less daunting that way.

11

Thank you! I’ll try it a step at a time. I never realized it may be so easy.

I’m guessing I should do it for tablets too. Rather than move element-by-element checking its breakpoint in google (which would be so time-consuming) I’ll try setting max-width to 750px for every problem non-responsive element as per this page:

I have a mobile responsive template that Paul did for me but the problem is finding the time to transfer everything into it page-by-page (about 120 pages).

I love your idea of keeping the leaves on laptops and dropping them on mobiles. Thank you! I was attached to my leaves. I think they look pretty :slight_smile:

12

I think I’ll use this on the elements like leaves:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 768px)

It seems in this particular case, since I don’t want to test every element’s breakpoint in google, that using device-width, rather than max-width, is the way to go.

To me, that @media above is saying: “if it’s a device between this width (phone) & this width (tablet) then don’t display the leaves, otherwise everything above 768px is ok to display.”

13

No that is the completely wrong approach I’m afraid. :smile:

All you are interested in is the available width for your design to display regardless of device. It doesn’t matter if its a desktop, ipad, iphone or laptop. Forget about devices as there are millions of them all at different sizes, orientations and resolutions.

You only use device-width when targeting a specific device and that means you miss all the other devices that may be slightly different. Also device width doesn’t equate into available pixel width but merely the width of the device and then you would also have to detect portrait and landscape modes also.

Use min and max-width media queries and avoid all the issues altogether (assuming the viewport meta tag is in place).

Just open and close the browser window on the desktop and as soon as you see a horizontal scrollbar on the viewport or if the design doesn’t look right then throw in a media query at that point and adjust the design until it looks better and the horizontal scrollbar goes away. Any time you have a horizontal scrollbar on the viewport will mean that a device cannot fit the page onto the screen and you will get a squashed layout with gaps at the side when the mobile device tries to accommodate all the content.

For example if the leaves start to cause a scrollbar at 800px then throw in a media query and fix it.

@media only screen and (max-width: 800px) {
.elementname {display:none} /* or whatever*/
}

I believe I already coded a responsive page for you some time ago that should serve as an example.

3 Likes
14

Hi Paul - yes you did give me a responsive template! But now that Sam said I could just remove the leaves, I’m hoping to change this css as a temp quick fix. In the far distant future I plan to go into every file and change the h2’s etc & transfer the whole site into your template.

The h2 format is giving me problems:

<div class="leafh2">
<h2>header2</h2></div>

That leaf in the h2 won’t work in mobile. So to try get the mobile h2 to look like your responsive template at:
http://dev.greensmoothie.com/

Here’s what I added at:
http://greensmoothie.com/1cde/1mst-test.php

@media screen and (min-width:320px) and (max-width:768px)
    {.leafh2,.leafh22{clear:both;width:75%;background:#e5ffbf;border-radius:0 20px 20px 0;padding:12px 12px 12px 20px;margin:20px 10px 30px -20px;}
    .leafh2 h2,.leafh22 h2{font:bold 1.2em Helvetica,sans-serif;color:#e60026;text-align:left;vertical-align:middle;}}

because at /dev it’s this:

h2{clear:both;width:75%;background:#e5ffbf;border-radius:0 20px 20px 0;padding:12px 12px 12px 20px;margin:20px 10px 30px -20px;
    font:bold 1.2em Helvetica,sans-serif;color:#e60026;text-align:left;vertical-align:middle;}

These are the other @media’s I added. They seem to be working ok.

@media screen and (min-width:320px) and (max-width:768px)
    {h1,h1.wp{padding:20px;}}

@media screen and (min-device-width:320px) and (max-device-width:768px)
    {#leaftop,.leaftoplft,.leaftoprgt,#leftcol,#rightcol,.leafdwnlft,.leafdwnrgt{display:none;}}

@media screen and (min-width:320px) and (max-width:768px)
    {#content{margin:0;}
    .txtbox,.txtbox2,.txtbox3{padding:20px;}}

@media screen and (min-width:320px) and (max-width:768px)
    {#leafup,* html #leafup,.leafuplft,.leafuprgt,
     #leafbtm,.leafbtmlft,.leafbtmrgt{display:none;}}

plus added:
.txtbox, .txtbox2, .txtbox3 {max-width:1080px;} to keep text to 100 characters/line

Q: Will setting a max-width to txtbox, separate the leaves from the txtbox in very wide screens?

15

You don’t need the min-width in there as max-width takes care of anything below 768px. Why suddenly stop at 320px?

The width of those elements seem to already be controlled by the parent container (#outer) which is 1200px wide and then inside content which has 56px padding and then textbox has padding also of 62px so it looks like the actual content width is around 960px anyway so 1080px will have no effect.

I don’t see a need for any widths there. Just remove the leaves when the page gets smaller as you are doing and then remove the padding from #outer as that is the space you are using for the leaves to show.

17

Thank you! Do you perhaps have a solution for:

<div class="leafh2">
<h2>header2</h2></div>

which in css is:

.leafh2 {
    clear:both;
    float:left;
    width:100%;
    background:transparent url(imgpg/leaf25.gif) no-repeat scroll 25% 50%;
    margin:30px 0 40px;
}
.leafh2 h2 {
    float:right;
    width:50%;
    background:#e5ffbf;
    padding:12px 10px;
    margin-right: -62px; /*txtbox padng*/
    font:bold 1.2em Helvetica,sans-serif; color:#e60026;
    text-align:center; vertical-align:middle;
    position:relative;
}

so I can get it display like this in mobile (under 768):

h2{clear:both;width:75%;background:#e5ffbf;border-radius:0 20px 20px 0;padding:12px 12px 12px 20px;margin:20px 10px 30px -20px;
    font:bold 1.2em Helvetica,sans-serif;color:#e60026;text-align:left;vertical-align:middle;}

The way I tried isn’t working.

It’ll take me 120 days to transfer all the old pages into the new mobile responsive wordpress template you did (about a page a day – because so many are still in the old 1990’s table’s) but this quick-fix css will mean I can have mobile up n’ running this weekend :slight_smile:

If I can just get that mobile h2 working so I don’t have to change about 800 individual h2’s in every file,…

18

Also in mobile I need to keep that navbox headed “Juicing Links” but of course without the leaves.

this is current html:

<div id="leafup">
<div class="leafuplft"></div>
<div class="leafuprgt"></div>
<div id="txtnav" class="rc20 clearfix"><?php include("$rpath/1cde/navjcr.php"); ?></div>
</div>
<div id="leafbtm">
<div class="leafbtmlft"></div>
<div class="leafbtmrgt"></div>

and css:

#txtnav {
    background:#f2ffdf;
    zoom:1.0;
    padding:10px 5px 15px 10px;
    margin:0 110px;
}

How do I say:
@media screen and (max-device-width:768px)
{show txtnav but don’t show the leaves
and also don’t show the buynow image inside txtnav}

thank you!

19

Hi,

I’m out all day but will have a look later this evening unless someone else wants to jump in first?:slight_smile:

20

Hi Paul – just 3 more problems (in addition to h2 + txtnav above) whenever you have time, at:
http://greensmoothie.com/1cde/1mst-test.php

(1) in Menu, under the first “Free Stuff” it’s creating 2 blank lines

(2) Hamburger menu doesn’t display in iphone - just switches to “x” when touch hamburger

(3) In iphone, with the “share” buttons (like, share, tweet etc) there’s no space between “like+share” and “follow” underneath even though you set a gap between them in the css

thanks million for your kind help! Val

21

whoo-hoo! I pass at google:

how cool is that? Weeks of work from Paul doing the head area (not to mention all the complicated css he did a a few years back that’s being dropped now because google complains the links are too close together for touch screen)…

…and one precious brilliant idea from SamA74 that I can just hide the leaves, and I’m rolling! I came here back in 1987 or so to get a mobile site and after 8 years TODAY’S THE DAY :):slight_smile:

Reminds me of that joke of the little old man who only had sex once a year and was jumping around and waving his stick and someone asked “why are you so happy if you get so little sex?” And he replied…