Jump to content

Is "@media only screen" really "mobile only"...?

Recommended Posts

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
  • Replies 3
  • Views 1.5k
  • Created
  • Last Reply
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.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment
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
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).

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.