Canvas Support

Gallery in full width

2 replies·opened Sep 21, 2017
L
lenorasSep 21, 2017

Can you tell me how to make the gallery section Full width? You only have 2, 3, 4, 5, and 6 column.
Thanks

I
ivanpossSep 22, 2017

you might want to check out "portfolio-single-gallery-fullwidth" or "portfolio-single-gallery-full". Is that what you are looking for? There are also some with sidebars. or if you wanted multi column full width they have those too... under "portfolio-5 ..... etc. ". Just skim through the canvas HTML directory.

S
SemiColonWebSTAFFSep 24, 2017

Hello,

If you are considering to make the Masonry Gallery with 1 Column Images stacked on top of each other, then consider using the following code: 

<div class="masonry-thumbs col-1" data-lightbox="gallery">
	<a href="images/portfolio/full/1.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/1.jpg" alt="Gallery Thumb 1"></a>
	<a href="images/portfolio/full/2.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/2.jpg" alt="Gallery Thumb 2"></a>
	<a href="images/portfolio/full/3.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/3.jpg" alt="Gallery Thumb 3"></a>
	<a href="images/portfolio/full/4.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/4.jpg" alt="Gallery Thumb 4"></a>
	<a href="images/portfolio/full/5.jpg" data-lightbox="gallery-item"><img class="image_fade" src="images/portfolio/2/5.jpg" alt="Gallery Thumb 5"></a>
</div>

and then use the following CSS Code: 

.masonry-thumbs.col-1 a { width: 100%; }

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