Header formatting works for safari but not chrome @media screen size technique on iphone

I was creating a responsive design theme from underscores

I was trying to format the header text .css file to make smaller text when it is opened up on an iphone device.

I used @media screen and (max-width 600px) as the rule set to change the size.

it works perfectly when I view it on safari browser, however when I open it on google chrome app it ignores the rules that I had set.

very frustrating, I tried resetting the cache to see if that would fix but after testing multiple times not sure what is causing it to ignore the rules I have set for the smaller screen.

one more question, is responsive themes still a thing? or is it something I should just abandon.

Topic responsive google-chrome css iphone Wordpress

Category Web

1
answered at

You need a colon after "max-width".

So your media query should look like @media screen and (max-width: 600px){ insert styles here }

Also, responsive themes are very much so still a thing. I wouldn't create a theme without it being responsive. It's pretty standard nowadays. Definitely do not abandon it.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.