0

I am creating a completely fluid design portfolio site that has a design thumbnail gallery page showing a grid of thumbnail tile links which a viewer can click to see the full art work. Since the site is completely fluid, the tile widths only match the tile height 3 times as one switches between the 3 responsive states since the heights are locked in place.

How can I make the height match the width of each thumbnail tile?

Here is the code:

@import compass
@import susy
@import normalize

$total-columns  : 4
$column-width   : 60px            
$gutter-width   : 20px           
$grid-padding   : $gutter-width

$container-style: fluid

$tablet : 9
$desktop : 14

// Susy-grid-background override to draw out horizontal lines
=susy-grid-background       
  +grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true) 


$base-font-size: 18px
$base-line-height: 30px
+establish-baseline

ul
  background-color: rgb(111, 50%, 250)

li
  background: rgba(200,50,0,.2)
  text-align: right     

img
  width: 100%

h1
  +adjust-font-size-to(90px)
  +adjust-leading-to(4, 90px)
  +leader(2, 90px)
  background: rgb(0,20,200)

h1#logo
  +adjust-font-size-to(30px)
  +adjust-leading-to(2, 30px)
  +leader(0, 30px)

h2
  +adjust-font-size-to(25px)
  +adjust-leading-to(1, 25px)

p
  +leader(1)
  +trailer(1)  


.page, header, .pagenav, .main, .pagefoot
  +transition(all .3s ease)

/* 5 Column Layout */

.page                                
  +container($total-columns, $tablet, $desktop)
  +susy-grid-background

/* ------------------- BREAKPOINTS ---------------------------- */
/* ------------------- MOBILE (default) ------------------------*/

p
  +leader(0)

header
  +container
  position: fixed
  left: 0
  right: 0
  bottom: 0
  height: 2.3em
  background: rgba(250,250,250,.7)

  h1#logo a
    +hide-text
    float: right
    +span-columns(1)
    background: red

  .navicon
    +span-columns(1)
    background: green

  .pagenav
    +span-columns(4)
    background: rgba(150,200,250,.3)

    ul
      background: #ffccff
    li
      text-align: left

.main
  +span-columns(4)
  margin-top: 1em
  background: rgba(1,240,200,.3)

.tile
  +isolate-grid(2, 4)
  height: 206px
  height: 233px
  margin-bottom: 1em
  background: cyan

  .tile_title
    +adjust-font-size-to(15px)
    +adjust-leading-to(1, 15px)
    background: #af6   

  .tile_use
    @extend .tile_title
    +adjust-font-size-to(10px)
    +adjust-leading-to(1, 10px)

/* ------------------- TABLET ----------------------------------*/

+at-breakpoint($tablet)
  .page
    +container
    +susy-grid-background

  p
    +leader(0)

  header
    +container
    position: fixed
    left: 0
    right: 0
    bottom: 0
    height: 2.3em
    background: rgba(250,250,250,.7)

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: red

    .navicon
      +span-columns(1 omega)
      background: green

    .pagenav
      +span-columns(2 omega,9)
      background: rgba(150,200,250,.3)

      ul
        background: #ffccff
      li
        text-align: left

  .main
    +span-columns(9)
    margin-top: 1em


    img 
      +span-columns(7, 9)

  .tile
    +isolate-grid(3, 9)
    height: 304px
    margin-bottom: 1em
    background: cyan

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   
      margin: 10px
      padding: 5px

    .tile_use
      @extend .tile_title
      +adjust-font-size-to(20px)
      +adjust-leading-to(1, 20px)



/* -------------------DESKTOP ----------------------------------*/

+at-breakpoint($desktop)
  .page
    +container
    +susy-grid-background


  header
    +container
    position: fixed
    left: 0
    right: 0
    top: 0
    height: 0
    z-index: 3

    h1#logo a
      +hide-text
      float: right
      +span-columns(2)
      background: red

    .pagenav
      clear: both
      float: right
      +span-columns(2)
      background: rgba(150,200,250,.3)

  .main
    +span-columns(12 omega)
    +leader(2)
    z-index: 1
    position: relative
    background: rgba(1,240,200,.3)

    img 
      +span-columns(10, 14)

  .tile
    +isolate-grid(4, 12)
    height: 304px
    margin-bottom: 1em

    .tile_title
      +adjust-font-size-to(25px)
      +adjust-leading-to(1, 25px)
      background: #af6   
      margin: 10px
      padding: 5px

    .tile_use
      @extend .tile_title
      +adjust-font-size-to(20px)
      +adjust-leading-to(1, 20px)

Here are the screen shots of site in various widths:

4 Column Responsive Mobile State

Tiles look like squares: GOOD

enter image description here

320px X 480px: Tiles get squished: BAD

enter image description here

Tiles get stretched: BAD

enter image description here

9 Column Responsive Tablet State

Tiles look like squares: GOOD

enter image description here

Tiles get squished: BAD

enter image description here

14 Column Responsive Desktop State

Tiles look like squares: GOOD

enter image description here

Tiles get stretched: BAD

enter image description here

UPDATE

Since I have implemented the use of Eric Meyer's fluid-ratio mixin from https://github.com/ericam/accoutrement/blob/master/stylesheets/accoutrement/_media.scss I was able to successfully get all my tile thumbnails to have equal height and width no matter the width of the browser window. The problem now is that the h3.tile_title and h4.tile_use elements are overlapping each other in each a.tile. the fluid-ratio mixin makes all my a.tile have position: relative and all it's children, h3.tile_title and h4.tile_use, have position: absolute. Here is a screen shot of whats happening:

enter image description here

Since some of my h3 titles wrap to become 2 lines in the a, I would like to be able to position the h4 so the h4 is always just below the h3. How would this be possible?

2 Answers2

1

CSS Tricks has a great rundown of fluid-media techniques. I'm a big fan of the Intrinsic Ratios option, and use a set of mixins to make it super-simple. I based that on code from toolkit, which now does things a bit differently. Use it something like this:

.tile
  +isolate-grid(4, 12)
  // ratio of 16/9, with a width equal to 4 of 12 columns
  +fluid-ratio(16/9, columns(4,12))

If you have extra markup you can use that for the ratio, and leave out the columns() function:

.tile
  +isolate-grid(4, 12)

.inside
  // ratio of 16/9, auto (100%) width
  +fluid-ratio(16/9)

Hope that helps.

Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Hey Eric. Yes thank you so much. It did help but also created an issue with the `h3` and `h4` elements which are children of the `a.tile`. They are now positioned on top of each other. I am pretty sure tis because `a` is being made `relative` and `h3` + `h4` are being made `absolute`. I have addressed this in my UPDATE located at the bottom of my original post. I would like to be able to have the `h4` always just below the `h3`. Is that possible? –  Jun 27 '13 at 11:35
  • Yeah, your best option is probably to wrap the h3/h4 in a div. Then the two headings will flow normally inside the absolute-positioned div. You'll also want to mess with the third argument (`$children`), since that selector is meant to target the media (`img`), but is currently targeting all children (`*`). Make that more specific, and then position the div manually the way you want it. – Miriam Suzanne Jun 28 '13 at 16:52
  • Thanks Eric. I just changed made `$default-fluid-ratio-children : 'div' !default;` and I got the result I was looking for. Now a new issue arose. When I look at the design gallery in a few different sizes I realize that I am using `margin-bottom: 1em`. Since the `margin-bottom` is set to `1em` it is not in sync with the dynamic, ever changing, vertical gutters of my `$container-style: fluid` page. How would I go about getting `margin-bottom` to be dynamic and in sync with the vertical gutters between the design tiles so it looks like a perfect grid? –  Jul 21 '13 at 13:50
  • Is this something I would have to add in the `fluid-ratio` mixin? –  Jul 21 '13 at 13:52
  • The only way I can think to do it would be to add extra vertical space in your fluid-ratio, and then offset the absolutely-positioned children from the `bottom` by a calculated percentage. It would take some math to sort out the specifics. – Miriam Suzanne Jul 21 '13 at 16:27
  • I see that `padding-top: (1/$ratio) * $width;` gives my design tiles their height. I tried to add some height there by doing `padding-top: (1/$ratio) * $width + 2%;` and sure it gives extra space below each design tile. The problem is that extra 2% of space does not match the $gutter value in my settings which is currently `$gutter-width : 20px`. IComes close but is far too small in the mobile state. Also keep in mind Im using `$container-style: fluid` so the `$gutter-width` always changing when browser is resized. How can I make that extra vertical space fluid like `$container-style: fluid` –  Jul 22 '13 at 00:42
  • Well, Susy is actually applying your "20px" gutters as a `%` margin. I *think* you want to match the extra padding to whatever value Susy is calculating for gutters. – Miriam Suzanne Jul 22 '13 at 06:33
0
  1. Calculate the optimal font size based on the width (and height) of the display
  2. Give the tiles a width in em and the same height. 10em seems like a good value.

See jsfiddle. Or, better for demonstration purposes, only the output pane of the same fiddle.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • Thanks but the tiles you coded are static. When I resize the window they remain the same size. –  Jun 26 '13 at 12:14
  • Oh, sorry, my squares only respond to the window width, not the height. But you can change the Javascript so that it includes the height as well. – Mr Lister Jun 26 '13 at 13:48