A friend of mine recently contacted me to ask for help with a WordPress site he had built using the X theme. His client had called him that morning after he noticed that his website wasn’t displaying correctly on his iPhone. Nick checked it out himself, and sure enough, the beautiful responsive design he designed wasn’t working anymore.
He was further mystified by the fact that when he resized his browser window on his desktop, the site was responsive, but on his iPhone, only the desktop version was displayed. Why would a site be responsive on a desktop computer and non-responsive on a mobile device?
Why Responsive Design Doesn’t Work
Responsive design stops working when one line of code is missing from the header of an HTML file. If this single line of code is missing, your iPhone, Android, and other mobile devices will assume that the website you’re viewing is a full-size desktop site and adjust the size of the viewport to encompass the entire screen.
What Do You Mean By Viewport and Viewport Size?
On all devices, the size of the viewport refers to the size of the area of a webpage that is currently visible to the user. Imagine you’re holding an iPhone 5 with a width of 320 pixels. Unless explicitly told otherwise, iPhones assume that every website you visit is a desktop site with a width of 980px.
Now, using your imaginary iPhone 5, you visit a website designed for desktop that is 800px wide. It doesn’t have a responsive layout, so your iPhone displays the full-width desktop version.
But an iPhone 5 is only 320 pixels wide. Isn’t that always the size of the viewport?
No, it’s not. With viewport size, scaling can be involved. The iPhone has to zoom out to see the full-width version of the webpage. Remember that viewport refers to the area of a page that is currently visible to the user. Is the iPhone user currently seeing just 320 pixels of the page, or are they seeing the full-width version?
That’s right: They’re seeing the full-width webpage on their display because the iPhone has assumed it’s default behavior: It’s zoomed out so the user could view a webpage up to a width of 980 pixels. Therefore, the iPhone’s viewport is 980px.
As you zoom in or out, the viewport size changes. We said before that our imaginary website has a width of 800px, so if you were to zoom in your iPhone so that the edges of the website were touching the edges of your iPhone’s display, the viewport would be 800px. The iPhone can have a viewport of 320px on a desktop site, but if it did, you’d only be seeing a small portion of it.
My Responsive Website Is Broken. How Do I Fix It?
The answer is a single line of HTML that when inserted in the header of a webpage tells the device to set the viewport to it’s own width (320px in the case of an iPhone 5) and not to scale (or zoom) the page.
<meta name="viewport" content="width=device-width">
For a more technical discussion of all the options related to this meta tag, check out this article on tutsplus.com.
How To Fix WordPress X Theme When It Isn’t Responsive
Back to my friend from before: This one line of code disappeared when he updated the X theme. When fixing yours, keep in mind that the X theme doesn’t use just one header file – it uses different header files for every stack, so you’ll have to edit yours.
Since Nick uses the Ethos stack of X theme, he had to add line of code I mentioned before to the header file that was located in x/frameworks/views/ethos/wp-header.php. If you use a different stack, substitute the name of your stack (Integrity, Renew, etc.) for ‘ethos’ to find the correct header file. Insert that one line, and voila! You’re good to go.
So This Fixes My CSS Media Queries, Too?
When you insert that line in the header of your HTML file, your responsive @media queries will suddenly begin to work again and the mobile version of your website will spring back to life. Thanks for reading and I hope it helps!
Remember to Payette Forward,
David P.
View Comments (25)
where to find the wp-header file?? Can u please detail more?? Thanks!
Hey payette im a web developer i designed a website but its responsive in all devices except i phonex my boss says it is not responsive in my i phonex but in all devices like samsung realme its responsive what should i do for it plz reply as soon as possible im having last for submission of my project.
Some ones here to fix my website problem is my website is responsive in all devices except i phonex plz help if anyone knows what should i do .
Hi! I want to make a responsive website but even with 4 meta tags, It isn’t responsive. I’ve tried many websites and have copied all the useful meta tags into my code but it still isn’t responsive. I don’t know if I should use global components now or just give up. Can you help me pls. I’ve been working for 4 days on this and this website is my last hope now. Can you pls help me?
I have used
I have problem with loading this page https://casino.guru on small mobile phones but only in spain language. I was checking all codes which give browser instruction on how to control scaling and dimensions. I dont know where is the problem. If you have already problem like that, your help is appreciated. Thank you.
I am a website designer and I used a responsive wp theme that I purchased in 2015 to build a clients site. I have no issues viewing it on my iphone via safari or chrome and it is responsive as it should be, but my client is not even seeing the little hamburger menu. Will that line of HTML fix an issue like this?? Why am I seeing it correctly but my client is not? Where else could the problem lie? Thanks in advance
Uhhhh. I pasted this into the top line of my HTML and it ruined my site's formatting. Completely erased everything I did
Thank you thank you!
Hi David, thanks for the article. This was exactly my problem and I thought all was fixed using your tips above until I viewed the site in monitor.. have you had that feedback before? The images of my site are now all stretched in monitor even though I designed it to be fluidly responsive to different platforms. Thanks in advance if you have any insights or tips to share!
You are a lifesaver. Thank you for this article!
Hello I am quite new here. The site I have been working on needs to be launched ASAP but it wouldnt display correctly on iPhones! It doesnt work in both Safari and Chrome browsers, it would only display the top left corner of the whole page (completely black because of my header image). I do not own any Apple devices so I cant test it myself, I would appreciate any help!
The site is powered by One Engine theme by Engine Themes, which I have downloaded it in 2014, when I first started using it and it was perfectly fine across most devices as far as I knew. I have only just updated the WP to 4.6.1 last week and update the site to the upcoming event.
After hours of Google-ing, I have learned that iOS update in 2015 had made many responsive theme broke. In the hearder.php of the theme, I have already inserted the following viewport meta tag:
I have also inserted the following media queries (from CSStricks)in the Custom CSS field of the theme:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
However nothing has changed on the iPhone6 which my friend has tested for me. I own a Android phone and the page displayed completely okay on Chrome.
I only know basic html so any help would be appreciated!!
thanks bro, well explained
I had the same problem, and today I have found this one - Thank you!
Latest: I copied the header-file (wp-header.php) to x-child/framework/views/integrity/, and job's done
Also, to prevent the viewport-code to be deleted by next update, he should add it to a child-theme, I think.
That's always a good idea!
Sounds like the real solution, but when I try to add the line of html I am told "The document “wp-header.php” could not be saved. Text encoding Western (ISO Latin 1) isn’t applicable."
Hey Carsten,
Thanks for your comment and for bringing this to my attention. It was my fault. WordPress (which I use as a backend) changed the formatting of the quotes character (") inside the code block when I published this article. When you copied and pasted it into your site, the site didn't know what to do because that unicode character had been changed. To PHP, one quote character is miles away from another. I've updated my site, reformatted the code, and double-checked it works on another one of my sites just to make sure. I apologize for the inconvenience, but above all, I hope it helps!
Thanks for reading and best of luck,
David
Can anybody help here?! This seems fairly misleading: "So This Fixes My CSS Media Queries, Too?
When you insert that line in the header of your HTML file, your responsive @media queries will suddenly begin to work again and the mobile version of your website will spring back to life. Thanks for reading and I hope it helps!"
Have the same problem. Any solution for that?
Sorry for missing this before. Did you end up fixing it, and how?
Same problem... Did you find a solution?
Thanks man!
Cool! Glad that worked. And for future readers, I'm grateful you helped me track down that bug in the code. :-)