Question: I have this simple HTML generated from React

```
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>

```

When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the 

[![enter image description here](https://i.stack.imgur.com/uY2fK.png)](https://i.stack.imgur.com/uY2fK.png)

This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?

Answer: 
What you're looking for is the @media selector. You read more about it [here](https://www.w3schools.com/cssref/css3_pr_mediaquery.asp).

At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add

```
@media only screen and (max-width: ##px) {

}

```

Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.

On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.

Say for instance in your primary post you had

```
.desktop {
font-size: 30px;
}

```

For phone, you'd put

```
@media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}

```

I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution [here](https://stackoverflow.com/questions/5582046/mobile-website-html-element-too-wide), simply adding meta tag for viewport

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

```