Responsive portfolio and pop up

1 reply · opened May 7, 2017

Cchristophedefaye1968May 7, 2017

Hello,
In this page : https://films-pour-enfants.com/films-enfants-7-ans.html

1-I would like to change the number of columns according to the size of the screen lg md sm xs xxs.
I tried to add something like data-md-col="2" data-xs-col="1" in the <div id=portfolio class="portfolio portfolio-4 grid-container portfolio-nomargin portfolio-full clearfix">
Does not seem to work.

2- I would like to alow the pop up window for all the size of the screen, but actually, the pop up window does not work for xs and xxs size.

Thank you,
best regards,
Christophe

SSemicolon WebSTAFFMay 10, 2017

Hello,

  1. This functionality is currently not support out of the box. Please find the defineColumns: function( element ) Function Block in the js/functions.js File and replace it entire using the following code:
defineColumns: function( element ){
	var column = 4,
		lgCol = element.attr('data-lg-col'),
		mdCol = element.attr('data-md-col'),
		smCol = element.attr('data-sm-col'),
		xsCol = element.attr('data-xs-col'),
		xxsCol = element.attr('data-xxs-col');

	if( element.hasClass('portfolio-full') ) {
		if( element.hasClass('portfolio-3') ) column = 3;
		else if( element.hasClass('portfolio-5') ) column = 5;
		else if( element.hasClass('portfolio-6') ) column = 6;
		else column = 4;

		if( $body.hasClass('device-sm') && ( column == 4 || column == 5 || column == 6 ) ) {
			column = 3;
		} else if( $body.hasClass('device-xs') && ( column == 3 || column == 4 || column == 5 || column == 6 ) ) {
			column = 2;
		} else if( $body.hasClass('device-xxs') ) {
			column = 1;
		}

	} else if( element.hasClass('masonry-thumbs') ) {

		if( element.hasClass('col-2') ) column = 2;
		else if( element.hasClass('col-3') ) column = 3;
		else if( element.hasClass('col-5') ) column = 5;
		else if( element.hasClass('col-6') ) column = 6;
		else column = 4;

	}

	if( $body.hasClass('device-lg') ) {
		if( lgCol ) { column = Number(lgCol); }
	} else if( $body.hasClass('device-md') ) {
		if( mdCol ) { column = Number(mdCol); }
	} else if( $body.hasClass('device-sm') ) {
		if( smCol ) { column = Number(smCol); }
	} else if( $body.hasClass('device-xs') ) {
		if( xsCol ) { column = Number(xsCol); }
	} else if( $body.hasClass('device-xxs') ) {
		if( xxsCol ) { column = Number(xxsCol); }
	}

	return column;
},
  1. Find the disableOn: 600, Code in the js/functions.js File and replace it with disableOn: 0, .

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