I am relatively new to Bourbon Neat and since the recent update I have been a little lost. I have a custom grid I have set up media queries for. The elements in the grid contain a 500x500 photo with a description underneath. My problem is if I set a max-width to the div containing the image to 500px, the grid aligns left and a margin is produced on the right at widths that are greater than the elements+gutters. If I remove the max-width, it centers perfectly but the containing div gets wider than the image which I don't want. How can I center my max-width elements at these widths? display: block; and margin: auto do nothing.
I am using HAML and SASS.
HAML:
.video-grid
.video-section#film-tv
%span.parallelogram
%h2.parallelogram-title Film and TV
.film-tv-videos
%a{:href => "/hardearth/"}
.video-slide-wrap
.video-slide
.video-slide-img-wrap
%img.video-slide-img{:src => "/images/500x500/hard-earth.jpg"}
%p.tiny-caption Teaser for Feature Film
%h6.video-slide-title The Hard Earth
%p.video-slide-description Documentary exploring America's relationship to Ukraine
%a{:href => "/vaselinescreen/"}
.video-slide-wrap
.video-slide
.video-slide-img-wrap
%img.video-slide-img{:src => "/images/500x500/vaseline-screen.jpg"}
%p.tiny-caption TV Show
%h6.video-slide-title Vaseline Screen
%p.video-slide-description Blur pop visions of what life could be like if we loved things we hate.
%a{:href => "/videos/patrick"}
.video-slide-wrap
.video-slide
.video-slide-img-wrap
%img.video-slide-img{:src => "/images/500x500/patrick.jpg"}
%p.tiny-caption Short Film
%h6.video-slide-title Patrick Worth Dying For
%p.video-slide-description Playing foreclosure as it lays.
%a{:href => "/videos/californiapsych/"}
.video-slide-wrap
.video-slide
.video-slide-img-wrap
%img.video-slide-img{:src => "/images/500x500/california-psych.jpg"}
%p.tiny-caption Short Film
%h6.video-slide-title California Psych
%p.video-slide-description Transcendental ending to an otherwise rotten country.
%a{:href => "/videos/badcredit/"}
.video-slide-wrap
.video-slide
.video-slide-img-wrap
%img.video-slide-img{:src => "/images/500x500/bad-credit.jpg"}
%p.tiny-caption Short Film
%h6.video-slide-title Bad Credit Good Moms
%p.video-slide-description Mom moves out of filmmaker's childhood home.
SASS:
$videos-grid: (
columns: 4,
gutter: 30px,
media: 1660px,
);
$videos-grid-2:(
columns: 3,
gutter: 30px,
media: 1440px,
);
$videos-grid-3: (
columns: 3,
gutter: 30px,
media: 1140px,
);
$videos-grid-4: (
columns: 2,
gutter: 30px,
media: 840px,
);
$videos-grid-5: (
columns: 2,
gutter: 30px,
media: 570px,
);
$videos-grid-6: (
columns: 1,
gutter: 0px,
media: 0px,
);
.video-section
@include grid-container($videos-grid)
width: 100%
padding-bottom: 30px
position: relative
margin: 0
.video-slide-wrap
@include grid-column(1, $videos-grid-6)
@include grid-media($videos-grid-5)
@include grid-column(1)
@include grid-media($videos-grid-4)
@include grid-column(1)
@include grid-media($videos-grid-3)
@include grid-column(1)
@include grid-media($videos-grid-2)
@include grid-column(1)
@include grid-media($videos-grid)
@include grid-column(1)
max-width: 500px
text-align: left
display: block
margin: auto
.video-slide
height: auto
position: relative
margin: auto
color: $black
overflow: hidden
.video-slide-img-wrap
display: block
margin: auto
height: auto
width: 100%
max-width: 500px
.video-slide-img
display: block
height: auto
width: 100%
.video-slide-description
display: block
margin: auto
padding: 5px
font-size: 0.9em
line-height: 1.2
.video-slide-title
display: block
margin: auto
text-align: center
margin-bottom: 5px
.tiny-caption
font-size: .8em
font-style: italic
With max-width: 500px on .video-slide-wrap:
With no max-width set on .video-slide-wrap:
This is assuming your goal is to have a series of blue boxes w/ images that grow until each of them become 500px and then cease getting larger, but instead grow farther apart from one another.
First up I think you should combine your %a{:href => "…"}'s and the .video-slide-wrap and then give .video-slide the blue background-color and max-width.
It's tough to backsolve your whole layout but this might look something like:
%a.video-slide-wrap{:href => "/vaselinescreen/"}
.video-slide
img
text
and then for the sass
.video-slide-wrap
@include grid-column(1, $videos-grid-6)
@include grid-media($videos-grid-5)
@include grid-column(1)
@include grid-media($videos-grid-4)
@include grid-column(1)
@include grid-media($videos-grid-3)
@include grid-column(1)
@include grid-media($videos-grid-2)
@include grid-column(1)
@include grid-media($videos-grid)
@include grid-column(1)
.video-slide
max-width: 500px
text-align: left
display: block
margin: 0 auto
background: blue;
Something like that should probably™ work.