Media Query for Mobile

[csmz9300]

I have a landing page that I am working on and I have a section header that I can't figure out how to have it resize for mobile. I have some media queries but I can't seem to make them work. direct link to css file: https://app.hubspot.com/design-manager/4077154/code/7496549216I 

[Anton]

Hi @csmz9300

most likely it's because the both "max-width"s are colliding. 

How do you check the responsiveness? With the browers build in responsive tools or with an actual mobile device?

Have you tried to change 

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

YOUR CONTENT

}

to

@media only screen and (min-width:677px) and (max-width:1169px){

YOUR CONTENT

}

the important part is the "min-width" one. Note that the min-width size is one pixel higher than the max-width of the second media-query. With this there won't be collisions. 

Also - here's a list of all media queries that you would/could need 🙂

regards

Anton