CODEWITHSUNDEEP
cssmedia-queries
Bo G.
Bo G.

Reputation: 107

Google Chrome simulated device size not triggering css rules

I'm working with media queries in order to make mobile-friendly a small two to three page site. I wanted to provide custom styles for any device with a width less than or equal to 375px (iPhone 6, for example). Here's how I am doing that in my css

@media only screen and (max-width: 375px)  {
  body {
    background-color: green;
  }
}

The problem is, when I simulate the iPhone using Google Chrome's device mode, the background-color: green isn't triggering. Moreover, the dimensions of the simulated phone aren't sized how they should be according to the rulers. It's kind of difficult to explain so I linked a screenshot and pointed to the parts that aren't making sense to me. Any idea what I'm missing? Any help is appreciated.

I should also mention that when I resize my screen outside of the simulator, the media query works fine.

Upvotes: 1

Views: 64

Answers (1)

jack_of_all_trades
jack_of_all_trades

Reputation: 332

Add this as a meta tag:

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

This sets the viewport to the width of the device. Basically, it tells the browser how the site should be displayed on mobile devices.

Upvotes: 1

Related Questions