css3 - css in portrait mode and land mode with @media -
i have css below. want kind of fluid / liquid (for lack of right terminology) css. developing mobile , when change modes portrait view land view, want flow nicely. right image in
<div class="parentdivision-separator-middle" style="margin-top: 3px;"><div class="image childdivision7"></div> works great land view in portrait view leaves lot of space after separator image. if take out !important css starts cut off image. had been fooling around since yesterday. appreciated
<style> div.parentdivision { margin-top:2px; } div.parentdivision div { height:281px; background-size: 100%; background-repeat: no-repeat; } @media screen , (max-width: 480px) { div.parentdivision div { height:151px; background-size: 100%; background-repeat: no-repeat; } div.parentdivision-separator-middle { height:151px ; background-size: 100%; background-repeat: no-repeat; } } @media screen , (max-width: 320px) { div.parentdivision div { height:151px !important; background-size: 100%; background-repeat: no-repeat; } div.parentdivision-separator-middle { height:151px !important; background-size: 100%; background-repeat: no-repeat; } } div.parentdivision-separator-middle { height:165px !important; background-size: 100%; background-repeat: no-repeat; } div.parentdivision .childdivision1 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision2 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision3 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision4 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision5 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision6 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.parentdivision .childdivision7 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); } div.image { margin: 1px; } div.parentdivision-separator-left { float: left; width: 49%; overflow: hidden; } div.parentdivision-separator-right { float: left; width: 49%; overflow: hidden; margin-left: 2%; } div.parentdivision-separator-middle { float: left; width: 100%; overflow: hidden; } div.parentdivision-separator div.image { padding: 2px; } </style> <div class="list-wrapper parentdivision"> <div class="parentdivision-separator-left"><div class="image childdivision1"></div></div> <div class="parentdivision-separator-right"><div class="image childdivision2"></div></div> </div> <div class="list-wrapper parentdivision"> <div class="parentdivision-separator-middle" style="margin-top: 3px;"><div class="image childdivision7"></div></div> </div> <div class="list-wrapper parentdivision"> <div class="parentdivision-separator-left"><div class="image childdivision3"></div></div> <div class="parentdivision-separator-right"><div class="image childdivision4"></div></div></div> </div> <div class="list-wrapper parentdivision"> <div class="parentdivision-separator-middle" style="margin-top: 3px;"><div class="image childdivision7"></div></div> </div> <div class="list-wrapper parentdivision"> <div class="parentdivision-separator-left"><div class="image childdivision5"></div></div> <div class="parentdivision-separator-right"><div class="image childdivision6"></div></div> </div> here jsfiddle
if make browser bigger or smaller see images cut off
i see images cut off, portrait or landscape (with !important height included). see no gaps.
is following desire? http://jsfiddle.net/yyske/2/show/
first of changed background images have 100% height, , auto width keep aspect ratio. set them centred in element:
div.parentdivision div { height:281px; background-size: auto 100%; background-repeat: no-repeat; background-position: center; } i stripped out of code in media queries you're repeating have in base styles.
now you'll notice image in parentdivision-separator-middle large fit inside container without being cut off or overlapping. because height set on parentdivision-separator-middle smaller childdivision7 set image. avoided setting height inherit:
div.parentdivision .childdivision7 { background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png); height: inherit; } there other areas code cleaned up, think gives you're looking for?
Comments
Post a Comment