Setting Appropriate Breakpoints -...

User 2571899 Photo


Registered User
20 posts

Is there a way to set breakpoints based upon something other than pixels? Maybe by inches or DPI? I'm testing some of my emails on my new Samsung phone that has a high res display that basically has the same resolution as my laptop. When the email is 8 inches wide I want things to be full width, when the email is 2 inches wide I want things to stack. But because two inches on my phone is the same pixel count as 8 inches on my laptop they both look the same causing the phone version to too small to read.

Any suggestions?
User 2699991 Photo


Registered User
4,782 posts
Online Now

what is the lowest breakpoint you have set ? (in pixels)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2571899 Photo


Registered User
20 posts

I'm just playing around with some of the stock templates. breakpoints are 720, 560, 490.

My cell phone screen is 1440 x 2960. So none of the breakpoints are ever encountered.
My laptop screen is 1920 x 1080.
Cell phone screen is two inches wide while my laptop screen is 20 inches.
User 2699991 Photo


Registered User
4,782 posts
Online Now

what template ?
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2571899 Photo


Registered User
20 posts

GoGreen and FastStart
User 2699991 Photo


Registered User
4,782 posts
Online Now

Donald Sanders wrote:
GoGreen and FastStart


On my version of those templates things stack at the lower end of the breakpoints.ok no problem.

Have you actually sent yourself an e-mail using the gogreen template for example, and seen it on your new samsung,, or are you just assuming that because the screen resolution on that is the same as your laptop that it will look the same,, ?
Screen resolutions and pixel sizes in RED don't really have any connection in any shape way or form,,
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2846109 Photo


Ambassador
341 posts

Also, don't confuse CSS pixels with Device pixels.Your phone might be 1440 wide but the it is not the same as 1440 CSS pixels.

Definitely google up the difference between CSS pixels and Device pixels. :)
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2571899 Photo


Registered User
20 posts

I have sent myself a GoGreen email straight from the template. I get a very tiny email. I can pinch/zoom. See the attached picture. I was expecting the menu bar along to top to become two rows and the columns at the bottom to become stacked.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Donald Sanders wrote:
I have sent myself a GoGreen email straight from the template. I get a very tiny email. I can pinch/zoom. See the attached picture. I was expecting the menu bar along to top to become two rows and the columns at the bottom to become stacked.


WOW I don't have the latest Samsung but I have Samsung and LG and the emails from that template sent to them work great,,, could it be that Samsung have now turned the whole world of responsive designs for mobile devices upside down ???
Just as an experiment go to my website on your phone & see how it looks if it behaves as it should and fits like it should then there must be something in RED causing it (website address in my signature bit )

Wayan
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2571899 Photo


Registered User
20 posts

I think the issue is myself confusing CSS pixels and screen pixels. You're website looks fine on my phone. here is a screen shot of GoGreen from my phone.
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.