html - Responsive CSS grid won't allow for proper spacing -
html - Responsive CSS grid won't allow for proper spacing -
i trying create page html , css3, unfortunately lastly time coded css3 wasn't thing yet. trying set images in reactive grid, grid keeps coming out looking this:
as can see other items aren't showing because assume not think there plenty room, here responsive css code using:
http://pastebin.com/qazmcrby
here css using on div:
.portfolio-section { } .portfolio-box { position:relative; overflow:hidden; margin-bottom:5px; } .js .portfolio-box { opacity:0; } .portfolio-box:hover .portfolio-caption { opacity:1; -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=95)"; filter: alpha(opacity=95); } .portfolio-image { margin:0; } .portfolio-image img { display: block; width: 100%; box-shadow:0 0 0 0 #000000; } .portfolio-caption:before, .portfolio-title { display: inline-block; vertical-align: middle; } .portfolio-caption:before { content: ""; height: 100%; } .portfolio-caption { position:absolute; top:0; left:0; width:100%; height:100%; display:block; opacity:0; text-align:center; overflow:hidden; background:rgb(127, 140, 141); background:rgba(127, 140, 141, 0.85); -webkit-backface-visibility:hidden; -webkit-transform: translatez(0); -webkit-transition:0.2s linear; -moz-transition:0.2s linear; transition:0.2s linear; backface-visibility:hidden; } .portfolio-title { color:#ffffff; margin:0; font-size:15px; text-transform:uppercase; } .portfolio-category { display:block; font-size:10px; text-transform:uppercase; letter-spacing:1px; margin-top:5px; } .des { text-align:center; font-size:12px; /* height:250px; overflow:hidden;*/ } and here code of page:
<!-- portfolio box 1 --> <div class="grid-25 mobile-grid-50 tablet-grid-33"> <a class="portfolio-popup" href="10607992_380327985449549_704859460_n.jpg"> <div class="portfolio-box"> <figure class="portfolio-image"><img src="10607992_380327985449549_704859460_a.jpg" alt="asus n550 performance laptop, $1200" title="asus n550 performance laptop, $1200"></figure><!-- close portfolio image --> <div class="portfolio-caption"> <h3 class="portfolio-title">$1200<span class="portfolio-category">asus n550 performance laptop, $1200</span></h3> </div><!-- close portfolio caption --> </div> </a><div class = "des">asus n550 performance laptop, $1200<form method="post" target="_top"> <input type="submit" name="submit" value="buy now"> </form></div> </span> </div> <!-- close portfolio --> i sense idiot. thing "resolve" issue add together "height:250px; overflow:hidden;" div looks awful. don't need in exact grid (but nice) - need not mess line of text added item. in advance.
there much markup , css such simple layout.
flexible product gridthis simple, no-frills, concept.
the html stripped bare<div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>long product description, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div> a sprinkle of css the products aligned display: inline-block , vertical-align: top
the products given percentage width , re-size naturally. in example, 25% gets 4 across.
box-sizing: border-box incorporates padding width , heights. of import can give each product padding , still declare reliable percentage width
the product description given min-height line buttons @ bottom of each product
the product image re-size in proportion max-width: 100% , max-height: 100%
note how closing div tag right next next opening div tag: </div><div>. prevent gap occurs inline elements.
re-size browser window see grid re-size fluidly.
class="snippet-code-css lang-css prettyprint-override">* { box-sizing: border-box; } .wrap { padding: 0 10px 10px 0; } .product { display: inline-block; vertical-align: top; width: 25%; text-align: center; min-width: 100px; padding: 10px 0 0 10px; } .product p { min-height: 50px; /* can alter @media */ } .product button { padding: 10px; background: #ddd; border-radius: 3px; color: #fff; text-decoration: none; text-transform: uppercase; font-size: 0.8em; border: none; } .product img { max-width: 100%; max-height: 100%; } class="snippet-code-html lang-html prettyprint-override"><div class="wrap"> <div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>long product description, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>short, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>long product description, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>short, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>long product description, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>short, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>long product description, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div><div class="product"> <img src="http://www.placehold.it/400" alt="image" /> <p>short, $2194</p> <button type="submit" name="submit" value="buy now">buy now</button> </div> </div>
html css html5 css3
Comments
Post a Comment