Search code examples
susy-compass

Compass Susy table layout to display the desktop layout


I have a site that I themed using the compass susy tool. So far so good. Now my client wants the iPad and device like it to display the desktop layout instead of a table layout (mobile layout is ok)

My current susy layouts:

$mobile: 4 44em;
$desk: 45em 12;

The issue I am having is that since I am using the magic grids the desktop layout look squeezed in the tablets.

I would like for the desktop layout to be view in tablet as a regular site not using any responsive grid or method that automatically zoom in or out and everything to fit on the screen proportionally.

Note: After thinking a bit more about the issue, I think I need to include the viewport for the mobile site, but not for the tablet or desktop.

What am I missing?


Solution

  • Yes, you'll need to update the viewport. Then simply set a min-width on the desktop container at whatever size you want it to stop shrinking:

    .container {
      @include at-breakpoint($desk) {
        min-width: 55em;
      }
    }
    

    (I don't know your code, of course. But you can adapt that as needed.)