Tagged: scale to view port
June 29, 2013 at 3:07 am #48347
Hi. I just built a Genesis site using Woo Commerce. I found that the ‘Select options’ buttons on the products are not responsive and break the layout when viewed on a mobile device. I have now decided to go with a min-width 960px and a max width 1152px design. I have managed to adjust the css to make this happen.
I then went to look at the site on a mobile phone. My iPhone does not scale to the view port. I can remember that there is a code or a bit of js that you add to the head of the site – but I don’t recall how to do it. This bit of code then makes the whole website fit on the screen. At the moment it just shows me the top left hand corner of the site and I have to zoom out on every page to see the whole page on my phone.
Can anyone help? http://thestationeryline.xl-websites.com/
Thanks – Sebhttp://thestationeryline.xl-websites.com/June 29, 2013 at 3:13 am #48348
Sorry me again: I found the code on CSS tricks: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
I added it in my ‘Head’
I added this but it has not made any difference.
How do I make the Genesis theme unresponsive so the viewport command works?
SebJune 29, 2013 at 4:00 am #48349
I figured it out: <meta name=”viewport” content=”width=device-width; initial-scale=0; maximum-scale=1.0;”>
Make the initial scale =0July 3, 2013 at 1:30 pm #49041
DaraParticipantPost count: 2
Hi, thanks for the tip! it looks as though your header scales down and shows perfectly on small screens. I and others have had trouble with this with various themes. I am wondering if you can share how you accomplished this. Thanks so much for your help.July 3, 2013 at 10:45 pm #49131
moshpitqueenParticipantPost count: 4
I would be interested in this info as well.July 4, 2013 at 2:29 am #49138
As it happens the scale to viewport did not do the job. The correct code was the one I found on CSS Tricks:
<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
I think the way to do it is to find a way to make the whole framework unresponsive and then add the code in your head section. The code makes iPhone. ipad devices scale the web site properly.
The way to get round the header issue in Genesis is to use this plug in. http://designsbynickthegeek.com/plugins/genesis-responsive-header
I have only been using Genesis for about 6 months so I am no expert.
Hope that helps – Seb
You must be logged in to reply to this topic.