Canvas Support

portfolio layers on mobile

1 reply·opened Sep 15, 2017
N
num3riumSep 15, 2017

Hi,

this code shows how i've integrated a portfolio :

<div id="portfolio" class="portfolio grid-container portfolio-3 portfolio-notitle clearfix">
	<article class="portfolio-item pf-media">
		<div class="portfolio-image">
			<a href="categorie.php?idcategorie=lorem">
				<img src="images/oeuvres/categ/lorem_vign.jpg">
			</a>
			<div class="portfolio-overlay" style="background-color:rgba(12,177,75,0.8);">
				<a href="categorie.php?idcategorie=lorem" class="center-icon"><i class="icon-line-layers"></i></a>
			</div>
		</div>
		<div class="portfolio-desc">
			<h3 style="font-size:30px;line-height:0.8;"><a href="categorie.php?idcategorie=lorem">lorem</a></h3>
			<span><a href="categorie.php?idcategorie=lorem">lorem</a></span>
		</div>
	</article>
</div>

The .portfolio-desc class shows its content doing an overlay hover effect very nice, but only on desktop .. on mobiles only images displays, so problem to navigate... see screenshot

How could i "force" with pieces of css, the display of the .portfolio-desc class on mobiles and let as now for all others ?

Thx
Pierre

S
SemiColonWebSTAFFSep 23, 2017

Hello,

This is Definitely Possible! Please consider adding the following JS Code at the bottom of the Page just after the js/functions.js JS File Linking: 

<script>
	function triggerPortfolioLayout() {
		if( jQuery('body').hasClass('device-touch') ) {
			jQuery('.grid-container').removeClass('portfolio-notitle');
			setTimeout( function(){ jQuery('.grid-container').isotope('layout'); }, 500 );
		} else {
			jQuery('.grid-container').addClass('portfolio-notitle');
		}
	}

	jQuery(window).on( 'load', function(){
		triggerPortfolioLayout();
	});
</script>

This will definitely work fine. Hope this Helps!

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

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