Menu icon Foundation
Media query returns to default css

Hi all,

I'm running into an issue with media queries.
I'm using the medium and large media query to make some elements smaller or larger according to screen size.
But when I resize my screen to the smallest possible it seems my elements display the default styles.
Adding the media query for small screens doesn't work either.

simple example:
let's say a have the following media queries for a div:

medium screens: text size is 18px / text color is white
large screens: text size is 22px / text color is white

If I resize my screen to the smallest size possible the text size is 2.75rem and text color is black.

Any ideas?

media querydefault style

Hi all,

I'm running into an issue with media queries.
I'm using the medium and large media query to make some elements smaller or larger according to screen size.
But when I resize my screen to the smallest possible it seems my elements display the default styles.
Adding the media query for small screens doesn't work either.

simple example:
let's say a have the following media queries for a div:

medium screens: text size is 18px / text color is white
large screens: text size is 22px / text color is white

If I resize my screen to the smallest size possible the text size is 2.75rem and text color is black.

Any ideas?

Alexander Assimidis over 5 years ago

Your small screen will be ur custom.scss and u have to use min-width and order ur scss like that.
Coud u post a Code or ur Site?

Wing-Hou Chan over 5 years ago

Howdy!

Yep, what Alexander said to do would be helpful!

Please post some code or preferably, a link to the site in development!