Masonry Thumbs - Responsive Grid

4 replies · opened Jan 1, 2021

SstookyJan 1, 2021

hello semicolon ... happy and most important HEALTHY new year to all the team !!!

I struggle to make the grid system responsive.
I am using the grid system in php, thats why I have the .'$file'. in code like this:


	[
		
			
![attachment]('.$file.')

			
				
					
				
				
			
		
	]('.$file.')	

I was looking for sth like

grid-xs-1
grid-sm-2
grid-md-3
grid-lg-4
grid-xl-6

but that does not seem possible

so how what I realize different grids for different devices?

rgds
stooky

SSemicolon WebSTAFFJan 3, 2021

Hello,

Thank You and Wishing You a Very Happy and Healthy New Year! :)

This is already possible and works in the same way as the Bootstrap Grid. Consider using the following code:
[ch_pre]<div class="masonry-thumbs grid-container grid-2 grid-sm-3 grid-lg-5" data-lightbox="gallery">[/ch_pre]

Will display 2 Columns on Extra Small Devices, 3 Columns from Small Devices, and 5 Columns from Large Device.

Hope this Helps!

Apologies for the Delays in Replying and Thanks for your Patience! Support is back in Full Swing after a Year-End Short Break.

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

SstookyJan 3, 2021

ok thx, I tested it on raw HTML and it works, so there must be an error in my php code.
good to know that it is implemented now I can continue debugging my code.

rgds
stooky

SstookyJan 3, 2021

stupid me, I added the classes to the wrong element
all fine, thx, solved
rgds
stooky

SSemicolon WebSTAFFJan 4, 2021

Hello,

Glad that the issue was resolved.

Do let us know if we can help you with anything else.

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