0

Since it's a bit difficult to explain, I did a mockup to get across as much as possible visually:

http://sassmeister.com/gist/70624a740b1ca4ae7764

(If there's a better way to share a sass gist, let me know. First time using it)

Basically, this is the layout I want for a tablet in landscape mode. What I'm trying to do is make sure it fits perfectly on different tablets with different aspect ratios. Some things are fixed. The main content area is a 16x9 video, so that aspect is locked.

I have the header and footer (main column only) fixed right now as they need to be for portrait mode, but I could bring them into the regular flow if it's helpful for tablet landscape. Anyway, it's all basic responsive right now via susy2, and the sidebar is totally separate so it can scroll independent of the main content. What I would like is for the whole main area including header and footer to fit perfectly with even margins above and below vid, but then have the sidebar column change it's width to match the tablet.

So... if the tablet is wider, the teaser thumbnails go out to 16x9 ratio. If the tablet is narrower, the main column remains unchanged, but the teaser thumbs narrow down to squares.

If it's easier first to just figure out how to responsively shrink the right column only, so the aspect of thumbs is unchanged, that's ok. I just don't want the overall layout to get screwed up on one device vs another because of aspect ratio, so main focus is that the header hits top, footer hits bottom, main vid fits perfectly between them, then sidebar responds to fill in the rest (within reason).

thx for any input. First time making a website here, so lots to learn.

ps. I had vertical scroll enabled for the right column, but disabled it (by adding extra letter to to the scrolling class in scss column) since it's not actually letting me scroll. Not sure if that's because there's no actual content, or it doesn't recognize the empty padded cells as something worthy of scrolling.

gregorio
  • 43
  • 7

1 Answers1

0

You're biting off a lot for your first website, but Sassmeister is a great way to show what you are doing. I approve. :)

One of the problems you'll find is that CSS don't have the concept of aspect ratio built in, so the sort of layout you are attempting is non-trivial. CSS is best at handling widths, and letting everything overflow vertically. It takes some effort to make it handle height well.

If you can get away with it (depending on browser support), your best option is to use flexbox. Flexbox should make this much easier, but doesn't ave a lot of support yet. You could consider table-cells, which have more support, but can be harder to control.

In any case, you should ignore most of Susy for this — at least in laying out the large sections. If you want Susy to help you with grid calculations, ditch the mixins and just use the span() and gutter() functions to help you set widths. Something like this:

.flexbox {
  flex: 1;
  flex-basis: span(3);
}

.tables {
  display: table-cell;
  width: span(3);
}


// NOT THIS
.no {
  @include span(3);
}

You can go back to using Susy mixins for simpler bits, like the items in the top navigation.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Yeah, thx. Been digging much deeper, and I can see where susy isn't the right fit for the larger framing tasks where I have columns that need to grow and shrink in varied proportions. I'm loving it for other areas where a more structured grid is required. – gregorio May 13 '14 at 00:32
  • Trying to avoid flexbox for larger layout. I've got the math all worked out for using vh and vw, vmin, etc... but support too patchy. Site is almost all video, and want perfect fit on any screen with independednt scroll only on teasers, so it's all about making the aspect ratios work. Looking into JS hybrid solution. We'll see. thx. – gregorio May 13 '14 at 00:39