Create Grids using Div's to make fluid gallery of images
Been attempting to create a very simple photo gallery grid using CSS and
not using plugins like masonry. I tried columns, grid systems etc - all
failed and was very complex.
What I have so far is 3-Div's and each Div has an #ID of Grid, so div-1
has #Grid1, div-2 has #Grid2 and div-3 has #Grid3. The Grids are
display:inline-block so they float next to each other. This worked like a
charm!
However, on small screens - I want to only show 2 Grids, so I have changed
the size of the Div's to 50% from being 33% to show only two divs - this
led to display #Grid3 in the center bottom of #Grid1 & #Grid2.
I tried to solve this problem, by making the width of #Grid3 100% and the
elements or sections inside it to 50%. that sorta worked, but it generated
a white-spaces like it shown in the image below:
Is there anyway to fix this? or what about remove the #Grid3 and spread it
content in #Grid1 and 2 when screen size is small? Any ideas?
Here is the HTML:
<div class="wrapperA1">
<div class="content">
<div id="home-sectionD">
<div id="grid1"><!--Gird 1-->
<article class="testimonial">
<img alt="Neal Kilburne​​"
src="assets/images/neal
kilburne​​.jpg"/>
<div>
<h3>Neal Kilburne​​</h3>
<p><em>CEO, iTEQ Global
www.iteqglobal.com</em></p>
<br>
<p>"Loai is a great asset to our company
and provides us with great and quick
responses,Such a talented designer which
we have the honour of working with." 2011
- 2012</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Amanda Chui​</h3>
<p><em>Owner of www.beautyroom.ca</em></p>
<br>
<p>Just what my website needed! When I had
finished my website, I felt that it was
missing something,so I enlisted in the
help of Loai. He did a great job of giving
my website the professional and polished
look it needed without having me wait for
days on end. Thanks, Loai!" June 23,
2012</p>
</div>
</article>
</div><div id="grid2"><!--Gird 2-->
<article class="testimonial">
<img alt="Geeta Martinez"
src="assets/images/geeta martinez.jpg"/>
<div>
<h3>Geeta Martinez</h3>
<p><em>Lawyer & Business
Consultant</em></p>
<br>
<p>"Leo did a great job! He designed and
put together several websites for me in
less than a week. He was incredibly
patient and flexible throughout the whole
process, and took a lot of the stress out
of the whole situation for me. He is a
really nice guy to work with - I really
appreciated his approach! I would
definitely recommend working with him".
July 14, 2013</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer
www.rjpstudios.co.uk​</em></p>
<br>
<p>"Loai designed my website last year on
wix though I could have done it myself
loai added a proffesional touch to the
design which is so important in creating
the best first impeson." 2013</p>
</div>
</article>
</div><div id="grid3"><!--Gird 3-->
<article class="testimonial">
<img alt="Glen Eric Huysamer"
src="assets/images/glen eric huysamer.jpg"/>
<div>
<h3>Glen Eric Huysamer​</h3>
<p><em>Specialist Service
Provider.​</em></p>
<br>
<p>"I would like to take this opportunity
to warn people who might consider using
Loai Design Studio. You will have to
buckle up and strap yourself in as this
young designer and associates take you
through the process of creating your
design needs. I was pleasantly surprised
from start to finish, and can say that
even though Loai took control of the
creative process the end result felt like
it was mine. You can not go wrong with
this young lad, go ahead surprise
yourself". December 30, 2011</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer
www.rjpstudios.co.uk​</em></p>
<br>
<p>"Loai designed my website last year on
wix though I could have done it myself
loai added a proffesional touch to the
design which is so important in creating
the best first impeson." 2013</p>
</div>
</article>
</div>
</div>
</div>
</div>
The CSS:
/*Home Page SectionD---*/
#home-sectionD #grid1,
#home-sectionD #grid2,
#home-sectionD #grid3 {
display: inline-block;
vertical-align: top;
width: 33.33%;
margin-left: -4px;
}
.testimonial {
background-color: #FFFFFF;
border: 1px solid #3e5679;
margin: 0 7px 15px 7px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.testimonial img {
border-bottom: 1px dashed #3e5679;
width: 100%;
padding: 2px;
}
.testimonial div {
padding: 20px;
}
.testimonial h3{
color: #456087;
}
.testimonial p:first-of-type{
color: #8C9CB5;
}
No comments:
Post a Comment