Foo Gallery simple portfolio. create 2 columns on mobile

Hi,

You can make the Simple Portfolio show 2 columns on mobile with some custom CSS.

Add this code to the custom CSS block, when editing the gallery:

@media screen and (max-width: 480px) {
	#foogallery-gallery-2.foogallery.fg-simple_portfolio .fg-item {
		margin: 20px !important;
		max-width: calc(50% - 40px) !important;
		min-width: calc(50% - 40px) !important;
	}
}

A few notes to help you customize this custom css:

• Depending on what exactly you are determining to be mobile, the media query value of 480px may need to be adjusted.
• The margin determines the gutter size. In the above margin: 20px equates to the default 40px gutter.
• If the margin value is changed the calc() equations need to be updated to reflect it. The equation is simply calc(50% – (margin * 2)).
• If you want to adjust the number of columns then they need to adjust the calc() equation again. The full equation would be calc((100% / columns) – (margin * 2)).

We will be looking to add this to the plugin in a future update

Worked very well, thank you!