Canvas Support

Portfolio Rendering the wrong way

6 replies·opened Sep 20, 2016
H
henriksarpSep 20, 2016

Hi there,

First off, great skin! It looks marvelous, and works alike.

However, we've encountered a problem:

When we have more than 1 line of text in either the Portfolio Header or the Portfolio Span text, the Portfolio module fails to render properly.
(We would love to send you the site, so you could see it in a working environment, but we do however only have it in test)
Our suspicion goes towards the wrapping code the Portfolio module uses to decide where and how the elements should wrap - being it either 4/3/2 elements per row according to the responsive design, but we ran into a loose end here. We cannot specify were the problem exactly relies.

Our code:

<!-- Portfolio - 4 Items - Systemløsninger - Start -->
<div class="portfolio grid-container portfolio-nomargin clearfix">

	<!-- Portfolio 4 - eDOCS DM -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/1.jpg" alt="eDOCS DM">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/edocs-dm/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="/systemloesninger/edocs-dm/">eDOCS DM</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - DMSync Manager for eDOCS DM -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/2.jpg" alt="DMSync Manager for eDOCS DM">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/dmsync-manager-for-edocs-dm/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">DMSync Manager for eDOCS DM</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - Smart Search Manager for eDOCS DM -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/3.jpg" alt="Smart Search Manager for eDOCS DM">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/smart-search-manager-for-edocs-dm/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">Smart Search Manager for eDOCS DM</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - UMBRACO Web Site -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/4.jpg" alt="UMBRACO Web Site">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/umbraco-web-site/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">UMBRACO Web Site</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - GALsync -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/5.jpg" alt="GALsync">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/galsync/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">GALsync</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - DocsCorp -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/3.jpg" alt="DocsCorp">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/docscorp/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">DocsCorp</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - JUNIPER Pulse -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/4.jpg" alt="JUNIPER Pulse">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/juniper-pulse/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">JUNIPER Pulse</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>

	<!-- Portfolio 4 - Email Archiving -->
	<article class="portfolio-item">
		<div class="portfolio-image">
			<a href="">
				<img src="/images/portfolio/4/5.jpg" alt="Email Archiving">
			</a>
			<div class="portfolio-overlay">
				<a href="/systemloesninger/email-archiving/" class="center-icon"><i class="icon-line-link"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3><a href="">Email Archiving</a></h3>
			<span>Teaser tekst</span>
		</div>
	</article>
	
</div><!-- Portfolio - 4 Items - Systemløsninger - End -->

(It is possible for us to link the testsite in a mail if you would like, however not on this forum site, just in case google would then crawl it and put it "out there")

Best Regards
Henrik

S
SemiColonWebSTAFFSep 20, 2016

Hello,

Thank You so much for the Kind Words and We Really Apologize about the Inconveniences caused.

We think that we have understood your issue but to be double sure about it and provide you with an accurate solution, it would be great if you can provide us with a Live URL. You can simply provide the Live URL using a Private Reply in this Forum Thread itself as it is protected and not crawled by Google. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

H
henriksarpSep 23, 2016

Hi there,

Thanks for the quick response.
Here is the Live URL:

Best Regards
Henrik

S
SemiColonWebSTAFFSep 24, 2016

Hello,

Thank You for the Live URL. This is actually not an issue and the Portfolio Items adjusts itself in the Grid in the available space like a Masonry Layout. This happens when some Items have irregular heights. This can be fixed easily by adding the data-layout="fitRows" Attribute to the .grid-container DIV. Example: 

<div class="portfolio grid-container portfolio-nomargin clearfix" data-layout="fitRows">

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

H
henriksarpSep 26, 2016

Hello there,

We thank you for the quick reply. I've just added it to the site, and it works accordingly, so we have no issues no.
Thanks again :-)

Best Regards
Henrik

S
SemiColonWebSTAFFSep 27, 2016

Hello,

Really Glad that your issues were resolved. Very Happy to Help! :) Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard