i relatively new bourbon neat , since recent update have been little lost. have custom grid have set media queries for. elements in grid contain 500x500 photo description underneath. problem if set max-width div containing image 500px, grid aligns left , margin produced on right @ widths greater elements+gutters. if remove max-width, centers containing div gets wider image don't want. how can center max-width elements @ these widths? display: block; , margin: auto nothing.
i using haml , sass.
haml:
.video-grid .video-section#film-tv %span.parallelogram %h2.parallelogram-title film , 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 feature film %h6.video-slide-title hard earth %p.video-slide-description documentary exploring america's relationship 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 life if loved things 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 %p.video-slide-description playing foreclosure 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 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 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 assuming goal have series of blue boxes w/ images grow until each of them become 500px , cease getting larger, instead grow farther apart 1 another.
first think should combine %a{:href => "…"}'s , .video-slide-wrap , give .video-slide blue background-color , max-width.
it's tough backsolve whole layout might like:
%a.video-slide-wrap{:href => "/vaselinescreen/"} .video-slide img text and 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 should probably™ work.
Comments
Post a Comment