My Responsive Website Isn’t Working. The Fix: Viewport.

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.

About Author

I'm a former Apple employee and the founder of Payette Forward, and I'm here to help you with your iPhone.

Subscribe
Notify of
23 Comments
Inline Feedbacks
View all comments
Sania
1 year ago

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.

Sania
1 year ago

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 .

reya
1 year ago

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?

reya
1 year ago
Reply to  reya

I have used

  •   <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8“>
  •   <meta name=”viewport” content=”width=device-width“>
  •   <meta name=”viewport” content=”width=device-width, initial-scale=0.5, user-scalable=no“>
  •   <meta name=”viewport” content=”width=device-width, initial-scale=0.5, user-scalable=no“>
Anonymous
3 years ago

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.

Anonymous
3 years ago

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

Anonymous
3 years ago

Uhhhh. I pasted this into the top line of my HTML and it ruined my site’s formatting. Completely erased everything I did

Anonymous
4 years ago

Thank you thank you!

Anonymous
4 years ago

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!

Anonymous
4 years ago

You are a lifesaver. Thank you for this article!

Anonymous
4 years ago

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… Read more »

Annas
5 years ago

thanks bro, well explained

Carsten Legaard
5 years ago

Latest: I copied the header-file (wp-header.php) to x-child/framework/views/integrity/, and job’s done

Carsten Legaard
5 years ago

Also, to prevent the viewport-code to be deleted by next update, he should add it to a child-theme, I think.

Carsten Legaard
5 years ago

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.”