CODEWITHSUNDEEP
javascriptcssreactjsheroku
almarc
almarc

Reputation: 1658

Mobile @media queries aren't working after uploading to heroku

The title describes it.

I have CSS media queries like

@media only screen and (max-width: 1080px){...}

(also tried without the "only screen and")
They work flawlessly on localhost with a smartphone. But when i commit the code to heroku, media queries refuse to work and give me the exact same website as on desktop. Any suggestions?

Upvotes: 0

Views: 475

Answers (3)

Allie Carrigan
Allie Carrigan

Reputation: 1

I ran into this issue as well. I don't know if you are using some web framework like I am, but if so you may be running into an issue with how your css files are being incorporated.

I am using Django, and resolved this issue by installing Whitenoise, which is a project that assists in serving static files within Django apps. Heroku has a helpful article.

Basically:

  1. pip install whitenoise
  2. add whitenoise to requirements.txt
  3. add 'whitenoise.middleware.WhiteNoiseMiddleware' to MIDDLEWARE = [...] in settings.py

Everything seems to be working fine for me now. Shouldn't have to include the media queries in the view or flag any css as important.

Upvotes: 0

nourza
nourza

Reputation: 2321

Try this @media only screen and (max-width: 800px) {} And try to add it in the view not in the css file

<style type="text/css">
@media only screen and (max-width: 800px) {}
</style>

Upvotes: 1

vitomadio
vitomadio

Reputation: 1140

Make sure you have this line in your index.html file:

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

Upvotes: 0

Related Questions