Trouble with size screen changes.

[popchau]

Hi i have a bit of trouble with rendering a css grid item for different screen sizes. Here is the deal, its scss and i have

various

@media only screen and (min-width: 120px) { …..}

@media only screen and (min-width: 680px) { …..}

@media only screen and (min-width: 1040px) { …..}

for different screen sizes. Now due to the grid changing i need to change/remove the width/margin/font size of a div. My issue is that every time I remove a property. The one from the screen size below it takes place.

For example if i remove width:100% for the 1040px size, the one at 680px takes place so it becomes 100% again.

Here is a printscreen of the particular part from my browser. (the file has a lot of css it would be a mess to copy paste)

For example if i remove width from 1040px the one at 680px becomes active.

Why is that? I checked my brackets again and again and they are ok. What am i missing here?

Thanks in advance.

[Beverleyh]

There was no image provided in your post, but going on the description, it’s doing exactly what it’s supposed to do, based on the type of media query… “from a screen min-width of X, do whatever” so as long as the screen is at least 680px wide, the styles in that media query, if they are not overridden in media queries of greater widths, will always be in effect.

If you only want styles to apply within a certain screen width range (e.g. between a min-width of 600px and a max-width of 799px), you would stack your media queries using the and keyword https://css-tricks.com/logic-in-media-queries/

Alternatively, you might only want to reset your CSS property back to its default value, so for width it would be width:auto;. Hit Google for other CSS property defaults.

If you need further or more specific help, please paste your HTML and CSS into a CodePen. You’re right – copying a whole load of CSS would indeed be messy, and we don’t want that. We’d need for you to provide only a very small sample instead; that’s just enough HTML and CSS to illustrate the actual problem. This means stripping it all back to the very basics.

[popchau]

Hi i have a bit of trouble with rendering a css grid item for different screen sizes. Here is the deal, its scss and i have

various

@media only screen and (min-width: 120px) { …..}

@media only screen and (min-width: 680px) { …..}

@media only screen and (min-width: 1040px) { …..}

for different screen sizes. Now due to the grid changing i need to change/remove the width/margin/font size of a div. My issue is that every time I remove a property. The one from the screen size below it takes place.

For example if i remove width:100% for the 1040px size, the one at 680px takes place so it becomes 100% again.

Here is a printscreen of the particular part from my browser. (the file has a lot of css it would be a mess to copy paste)

For example if i remove width from 1040px the one at 680px becomes active.

Why is that? I checked my brackets again and again and they are ok. What am i missing here?

Thank you so much

---

https://appsync.biz/speed-test/ https://appsync.biz/scrabble-word-finder/ https://appsync.biz/solitaire/

[Author]

Posts