user3728233 user3728233 - 1 month ago 5x
HTML Question

Why does my website looks okay on reducing browser width, but cuts in half on phone screen?

Here's my website,, It's my portfolio website, if you view this in the browser and decrease the browser width, it'll look fine.
However, if you look at it in your actual mobile device (I tested it on my iPhone) it'll be cut in half. I have no clue why this is happening. I've player around with a lot of meta tags as well. Currently I have this,

<meta name="viewport" content="width=device-width" />

I've tried doing this too,

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

But this makes my website horizontally scrollable to upto double the actual width. (it just shows whitespace).

I also have,

overflow: hidden;

in my media queries, I have no clue why this is happening. Please help!


First set your meta tag to <meta name="viewport" content="width=device-width; initial-scale=1">

Then, your header .main-headline is having 950 width that causes the problem.