I like how my site looks on droid without the viewport setting
<meta name=“viewport”, content=“width=device-width, initial-scale=1” />
But if I don’t use the viewport metatag, google sends less traffic.
When I use this viewport almost nothing shows. What do I do?
Thanks,
Chris
Can you show us the site?
But do your users like it? Or do they have to pinch and zoom to read it?
The answer is to use the meta tag and then style the page with media queries so that it fits better on the small screen in a way that users can read it and navigate without pinching and zooming or without having incredible eyesight to read the small text.
If you definitely don’t want to use media queries I suppose you could add the viewport meta tag but set it at a width that matches your design.
e.g.
<meta name="viewport" content="width=980">
However, I don’t know if that will satisfy google’s mobile algorithm checker so you will need to test.
The best course of action though is to make the site responsive and please everybody (apart from you apparently) 
On “without pinching and zooming”
Is that hard to do? Why have a function if the goal is to not use it? I don’t get it?
I don’t think I can style the media queries (even if I knew how, or what a media query is) without reorganizing my site.
I did use the code you have above with 972 since that’s the max width I have set in the css.
See actualczuzrzes.zcozm w/o the Zs.
Thanks Paul
My car has air-bags, but I don’t want to ever use them.
Pinching and zooming was the method that allowed websites not designed for mobile to be able to be viewed on mobile (after a fashion). You can’t really navigate a site by pinching and zooming all the time as its very awkward.
I checked your site on google mobile friendly and it still shows the site as not being mobile friendly so you are probably stuck unless you want help in using media queries to make the pages adapt?
If you want to learn how to apply media queries to that page then we can teach you one step at a time?
Your home page is pretty straight forward 3 columns (although you have swapped columns with negative margins) and it would be a matter of reverting to a single fluid column for smaller screens.
Unfortunately, I am probably away most of Thursday and Friday but I’m sure @SamA74 or @RyanReese Ryan could jump in and get the ball rolling.
I’m just jumping in; what exactly do you envision the mobile view to be for actualcures.com, that differentiates from the desktop view?
I’m adopting 2 cats on Friday so I might be busy as well 
. I’ll help until then.
I don’t have anything in mind. Maybe the same thing only smaller, like it is now, only google says it’s too small. Maybe not so small and space created by making the middle column more narrow.
The first thing is to make the header image responsive, that’s not too difficult.
Then there are the three columns to deal with. you will want a media query at about 700 to 650px to lose the 3 col layout. The question is: what do you want to do with the 2 side columns on the narrow screen? You could simple shove them to the end of the page, after the main content, or maybe hide them in rollouts at the top/bottom/side until clicked. Any more ideas?
I did do a basic example of a 3 col responsive page here.
Drag the width and watch for where the media query kicks in.
Add the correct viewport meta tag to the page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next add this css after your original css.
.header {
max-width:831px;
width:auto;
}
@media screen and (max-width:762px) {
body {padding:0}
.header {margin:10px 5px}
#colmid, #colleft, #col1wrap, #col1, #col2, #col3 {
float: none;
width: auto;
position: relative;
right:auto;
left:auto;
margin:0;
padding:0;
}
#colmid {
border-bottom:1px dotted #fff;
padding:10px 15px;
margin:0 0 20px;
}
#content {
margin:0 5px;
width:auto;
}
.trend.cntrimg {
width:100%;
max-width:471px;
height:auto;
padding:62% 0 0;
background-size:cover;
}
.vspace, .rcvspace {display:none}
ul.side.a li {margin:20px 0}
.uncolleft, .uncolright {text-align:left}
}
That will collapse the page into one column. I have only checked the home page you linked to but the above should be a good start and you can then just tidy things up a little more as required.
Are you saying your code will keep things the same and pass Google’s test? I think maybe you programmed too soon. Since “pinch and zoom doesn’t work all that well” and Google and others saying the text is too small and Ryan’s ‘What do you have in mind.’, I thought maybe the right column content could be put under the left column content and so remove the right column. Would that increase the size of the text?
Thanks
That could maybe work for mid-size screens. But on the smallest screens 2 cols may be too much, so you will have to think about what you will do with the other column then.
Have you tried Paul’s code yet? I have not looked closely at it, but he generally knows what he’s doing when it comes to RWD. Give it a try, even if its not on the live site, if you are not sure.
I’m guessing it will pass the test, but not be the same (on small screens).
I was quite clear when I said:
You cannot keep the page the same and pass the google test you have to use the meta tag and use media queries to change the layout in order for the text to be readable.
Just add the code I gave you as per my instructions and you can see what the effect will be by just closing the browser window smaller.
It should take you no longer than 30 seconds to try out on either your live page or just a local copy of the live page or indeed just paste the css I gave you into css terminal and you will see the effect straight away without making any changes to your site at all. Then once happy that was what you wanted you can make the changes live.
I’ve done all the hard work and the rest is just cosmetics.
Sorry about that Paul. I didn’t look to see if there was text after your code.
I’ll see what happens, but if it works I’ll need the htaccess code to differentiate between desktop and hand held, although I noticed validators for HTML 5 say handheld is depricated, leaving only screen as far as I can see. I definitely don’t want one column for deskop screens, most of which are 15 inches or wider.
Thanks
I think you misunderstand a little
RWD (Responsive web design) does not need to differentiate between devices and indeed it is almost impossible to simply check for mobile or touch.
Effectively all you are interested in is viewing area and this is the same for a desktop with the browser window closed down to 300px or open up at 1920px.
You design so that your site fits in any size window that it happens to find itself. There is no need to know anything about device size or what device is viewing as long as you have made the page fluid and responsive and you can be relatively safe in the knowledge that your site will fit.
You adjust the design using media queries so that it fits the best as it can. As I already said you simply grab the edge of your browser window and make it smaller and smaller until there comes a point where the design looks awkward, or a horizontal scrolbar appears and then at that point you throw in a media query and adjust the site so that it fits better. Usually this means changing from 3 columns into 2 or one column so that there is more room. Large screens get 3 columns and then smaller screens get the one column.
I have already given you the code to do this so I suggest you add my code and check before asking any further questions as all will be revealed once you add my code and see for yourself (either on your live site or on a local copy for testing). It would then be your job to tidy up any loose ends.
These days there is no dividing line between what is mobile and what is not. Small phones and small tablets progress into large phones and large tablets, mini tablets, mini ipads ,large ipads, retina ipads, extra small laptops notebooks, laptops with touch, laptops without touch, desktops with touch desktops without touch and a million more in-between. You can’t really differentiate what is mobile and what is not these days.
The first rule of device club is not to talk about devices:)
No need for any of that. Responsive design takes care of all that, that’s what its for. The media query:
@media screen and (max-width:762px) {}
detects a smaller screen, as defined, in this case 762px, and applies the css with the {} only to them. The css before the query applys to all, but can be overriden by the stuff inside the querey (only on the small screen).
That’s what a media query is and does. (There are other types of media query, but don’t worry about that for now.
You won’t, the stuff before the query can be set up just as you like for larger screens, with as many columns as you desire. Just in the small screens (stuff inside the query), things get re-arranged.
Did you look at the example I posted? Open it up in a window where you can drag the width in and out and see what happens. Then take a look at the css.
)
Unfortunately the code has no effect on google’s mobile checker that I can see.
https://www.google.com/webmasters/tools/mobile-friendly/
I’ll leave it in so you can see.
Did you? Because I don’t see it, and that’s one of the things Google is complaining about.
As TechnoBear said you have not added the viewport meta tag that I explicitly gave you in post #10.
Without this tag the page will not condense into one column at 762px and therefore will not be mobile friendly,
Add the tag and I’m sure all will be well
I did. Had to stop for a while just as I started, 'probably didn’t save it.
That looks great! These limited screens really are limiting. I was reading about how Wikipedia is having problems recruiting new programmers because so many now are starting out with mobile (and I guess don’t have a desktop) and what they need don’e is difficult to do on mobile screens. I think roll up screens are on the way.
I think the genie’s in the bottle Paul. Thanks!
Chris