sneather Posted May 28, 2021 Share Posted May 28, 2021 I assumed that the CSS code @media only screen would trump any and all screen-size settings (640px, 1280px, etc) - and ONLY affect mobile devices. However...I'm finding that my desktop behavior still seems to be affected by some of those CSS mobile changes. What am I not understanding? Have I grossly misunderstood the use of the @media code? Link to comment
paul2009 Posted May 28, 2021 Share Posted May 28, 2021 4 minutes ago, sneather said: I assumed that the CSS code @media only screen would trump any and all screen-size settings (640px, 1280px, etc) - and ONLY affect mobile devices. @media screen specifies that the styling only applies to screen devices (desktop and mobile) as opposed to print devices. The "only" keyword is used to hide media queries from older browsers. If you want CSS to only apply to a mobile device (or several mobile device types) then you need to specify the viewport widths that it will apply to. About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
sneather Posted May 28, 2021 Author Share Posted May 28, 2021 1 hour ago, paul2009 said: @media screen specifies that the styling only applies to screen devices (desktop and mobile) as opposed to print devices. The "only" keyword is used to hide media queries from older browsers. If you want CSS to only apply to a mobile device (or several mobile device types) then you need to specify the viewport widths that it will apply to. Thanks for clarifying. That's really important to know. At the moment, I'm using "max-width" instructions, for those mobile page instructions, but maybe I need to also use "max-min"? The issue I am facing, is that some of my text margins are becoming huge, on larger desktop displays. But, when I increase the site-wide padge width (max) - it seems to trigger some weird behavior (from my CSS I think) and some of the text blocks shrink in size. Maybe someone can dig in and see if I screwed something up? www.adambaral.com P.S. You mentioned "...as opposed to print devices" - what does that mean? Link to comment
paul2009 Posted May 28, 2021 Share Posted May 28, 2021 1 hour ago, sneather said: You mentioned "...as opposed to print devices" - what does that mean? CSS can also be used to style the way that a web page appears when it is printed (@media print). About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment