Jump to content

Definitive/most widely used screen size breakpoints

Recommended Posts

Hi, can somebody give me the most widely used screen size's used on your media queries please? 

I'm struggling to get my site to behave as it should on iPhone's, Android phones, tablets and desktop. 

Every blog and website post has different screen sizes stated in their breakpoint media queries

Also, should I always use min width as well as max width? Or just one of them?

Your help will be greatly appreciated! 

Thanks

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi @NP3000, which version of Squarespace are you using? Can you share the your website URL and password if it's not live?

What media query size you use will depend very much on what you're trying to do. 750px is an important breakpoint between desktop and mobile for Squarespace 7.1 with the Fluid Engine editor. But with the classic editor 640px is the major transition.

Typically it's good to bound with max and min if you're wanting 3 or more different styles for different screen sizes, if you're just adjusting for desktop/mobile than you shouldn't need to use both max and min on the same query.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Thanks very much Ziggy. I'm using 7.1. I'll adjust the current css to 751px and see how that looks. 

I'll send the website url and password in an email as the website is not live yet. 

Also, can you recommend any screen emulators? I've been using the Emmet Re:view chrome plugin but I'm not sure how reliable it is. 

Thanks again

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.