Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Ivan Tomicic
3,873 PointsProportional height
Hello guys, it is me again...
I need your help... I have this code for portfolio of one website and I want to make it responsive, now I'm facing problem, I made width flexible but I have no idea how to make height proportional to its width, can you help me out?
Thanks
<div class="portfolio-wrapper">
<!-- ================================================================================================= -->
<div class="portfolioitem v-big h-big">
<a href="http://www.protectcalgary.com" class="hovereffect" target="_blank">
<div class="veralign">
<h2>Calgary River Communities</h2>
<ul>
<li>Responsive Website</li>
<li>URL naming</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.protectcalgary.com</span>
</div>
</a>
<img src="images/portfolio/calgary.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div class="portfolioitem v-small h-big">
<a href="http://dougblack.ca/" class="hovereffect" target="_blank">
<div class="veralign">
<h2>Senator Doug Black</h2>
<ul>
<li>Campaign</li>
<li>Print</li>
<li>Website</li>
<li>Social Media</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.dougblack.ca</span>
</div>
</a>
<img src="images/portfolio/dougblack.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div class="portfolioitem v-full h-small">
<a href="http://www.edmonton.ca/zoo" class="hovereffect nogrey" target="_blank">
<div class="veralign">
<h2>Edmonton Valley Zoo</h2>
<ul>
<li>Crisis Communication</li>
<li>Website</li>
<li>Brand</li>
<li>Print</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.edmonton.ca/zoo</span>
</div>
</a>
<img src="images/portfolio/zoo.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div class="portfolioitem v-small h-small">
<a href="http://www.trinityhills.ca/" class="hovereffect" target="_blank">
<div class="veralign">
<h2>Trinity Hills</h2>
<ul>
<li>Website</li>
<li>Media Strategy</li>
<li>Brand</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.trinityhills.ca</span>
</div>
</a>
<img src="images/portfolio/trinity.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div class="portfolioitem v-big h-small">
<a href="http://www.fb.com/MRIalberta/" class="hovereffect" target="_blank">
<div class="veralign">
<h2>MRI Alberta</h2>
<ul>
<li>Crisis Communication</li>
<li>Brand</li>
<li>Landing Page</li>
<li>Social Media</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.fb.com/MRIalberta</span>
</div>
</a>
<img src="images/portfolio/mri.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div class="portfolioitem v-big h-big">
<a href="http://www.lovebritta.ca/" class="hovereffect" target="_blank">
<div class="veralign">
<h2>Britta Jewellery</h2>
<ul>
<li>Brand</li>
<li>Writing</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.lovebritta.ca</span>
</div>
</a>
<img src="images/portfolio/nakit.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
<div style="background:grey;" class="portfolioitem v-small h-big">
<a href="http://www.blackcoffeegroup.com/" class="hovereffect" target="_blank">
<div class="veralign">
<h2>Blackcoffee Group</h2>
<ul>
<li>Brand</li>
<li>Design</li>
<li>Print</li>
<li>Website</li>
</ul>
<div style="height:1px;background:#fff;width:59%;margin:20px auto;"></div>
<span>www.blackcoffeegroup.com</span>
</div>
</a>
<img src="images/portfolio/blackcoffee.jpg" alt="Photo name" class="grey">
</div>
<!-- ================================================================================================= -->
</div>
.portfolio-wrapper {
max-width: 1170px;
width: 95%;
margin: 0 auto;
overflow: hidden;
}
.portfoliotext {
max-width: 850px;
width: 90%;
margin: 0 auto 70px auto;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.v-small { width: 430px; width: 36.752136752136755%; }
.v-big { width: 700px; width: 59.82905982905983%; }
.v-full { width: 1150px; width: 98.29059829059829%; }
.h-small { height: 370px; }
.h-big { height: 450px; }
.portfolioitem {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: .8547008547008548%;
letter-spacing: .8547008547008548%;
padding: 20px;
position: relative;
}
.portfolioitem img {
max-width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 8888;
transition: all ease 0.3s;
}
.hovereffect {
z-index: 9999;
position: relative;
display: block;
background: rgba(98,189,180,0.8);
height: 100%;
width: 100%;
color: #FFF;
text-decoration: none;
opacity: 0;
transition: all ease 0.3s;
}
.hovereffect:hover {
opacity: 1;
}
.hovereffect:hover ~ .grey {
opacity: 0.5;
-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.hovereffect h2 {
margin: 0 0 15px 0;
padding: 0;
font-weight: 300;
font-size: 1.750em;
text-transform: uppercase;
letter-spacing: 2px;
}
.hovereffect ul {
list-style: none;
margin: 0;
padding: 0;
}
.hovereffect ul li {
display: inline-block;
font-size: 0.875em;
}
.hovereffect ul li:not(:last-child):after {
content: "•";
margin: 0 10px;
}
.hovereffect {
letter-spacing: 1px;
}
2 Answers
Ronny Gudvangen
4,685 PointsYou could try and check out this approach: http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/
Other wise it's probably easier with some JS.
Ronny Gudvangen
4,685 PointsA fiddle with working functionality: http://jsfiddle.net/ndzCL/
I've done some of the same before, but it all comes down to so many things that needs to play fine together. I would probably go for a JS alternative, that calculates the height when browser is resized.
Ivan Tomicic
3,873 PointsIvan Tomicic
3,873 PointsI tried that but somehow it is not working...