CODEWITHSUNDEEP
compass-sasssusy-compass
Carrie Hall
Carrie Hall

Reputation: 931

Susy / Compass mobile-first grid not working on mobile devices

I've recently done a quick portfolio site which I'm still in the process of tweaking, but I've used a susy grid which when I resize it smaller using the browser, it still looks how I expected it to look. I have three breakpoints in essence, one for browsers, one for tablets, and one for phones.

Only problem is, when I load it up on my phone (HTC Desire) the zoom seems way off, and it's sizing it like it's the middle breakpoint (tablet).

The breaks I've set are:

$break-medium: 30em $total-columns;
$break-large: 60em $total-columns;

The website is here

I've also noticed that when you zoom in on the site, you then need to horizontally scroll, which is what I'm trying to avoid! The actually Susy site doesn't do this either.

Upvotes: 0

Views: 346

Answers (2)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

This doesn't actually have anything to do with Susy, or getting your breakpoints right. By default, mobile safari acts like it has a viewport width of 980px, so that it can handle non-mobile-friendly sites. If you have built a mobile-friendly site, you have to let Safari know. See automatic zoom on iphone safari for example. You probably want something like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 2

Jeremy Iglehart
Jeremy Iglehart

Reputation: 4479

Carrie,

I don't know the resolution of your HTC Desire - but one tool that I use to check the proper break-down of my "break-points" for responsive design is this one:

http://www.josscrowcroft.com/2011/code/window-size-bookmarklet/ https://github.com/josscrowcroft/Window-Size-Bookmarklet

It is a bookmarklet that posts the size of the viewport. On mac with google chrome however I find this number to be "off" by about the same amount of pixels as the scrollbar is wide or something like that. So it's not perfect - but it does help troubleshoot the issue.

I would look to see if your em's are matching your expected pixel width for the breakdown and see if that matches your HTC - also the EM's might be getting screwed up along the way (browser settings, your html object not having the proper settings etc.). You can always try to test this by setting it to a fixed pixel width for testing and then do all your maths for em(s) again.

I'm not sure if this helps, but at least you have one more option for a tool in your belt now (if you already didn't know about this one that is ;)

Good luck & Cheers, -Jeremy

Upvotes: 0

Related Questions