Your plugin is not working properly

Hi @irina1975,

Try adding the code shown below to your theme’s style.css or custom CSS/additional CSS area. To enable the code to affect a specific gallery, go to WordPressadmin->foogallery->galleries, edit the gallery you want and add the code to the custom CSS area.

/* fill foogallery maximum width */
.fg-simple_portfolio .fg-item {
max-width: 100% !important;
}

The code above enables the gallery items to fill the width on both mobile and desktop to fill the voids. However, for mobile devices, what could you be referring to by using small squares? Please elaborate further.

Kind regards,
Blaise

Thanks a lot, I’ll try.
As for the small squares – there is an example on the page at the very bottom of 4 squares with photos and inscriptions on mobile phones – you need to do less and less on your phone.
Thank you, best regards.

I pasted this at the very bottom in my style.css file:

/* fill foogallery maximum width */
.fg-simple_portfolio .fg-item {
max-width: 100% !important;
}

did not help ??

I did as you said. Thank you, problem solved. ?? But how to make small squares on mobiles in 2 lines? Since what is now is very large on mobile devices (the first four very large squares (introduction on each page —– difficult visually for website visitors)
Sincerely.

@steveush, please can you provide the css for 2 columns on mobile.

Hi @irina1975,

I took a look at your example page and wanted to address as many of your concerns as possible. This may be a bit lengthy but hopefully answers everything.

(A) Portfolio Issues

1. Huge Left & Right Indents. Left and right indents are because the items are center aligned and no more items can be fit into the current row.
2. Not done in two rows. The template makes as many rows as neccessary to display all items.
3. Making squares smaller doesn’t help. Portfolio template specifically tries to maintain the original thumbnail size set in the admin.

Solution: Custom CSS

/* This media query only allows these styles to be applied on a screen with a width smaller than or equal to 480px */
@media only screen and (max-width: 480px){
	.foogallery.fg-simple_portfolio .fg-item {
		/* Change the gutter size */
		margin: 10px !important;
		/* Change the width so two columns are displayed. 
		The 20px value is the gutter multiplied by 2 as it is 
		displayed on the left and right of the item. */
		width: calc(50% - 20px) !important;
		min-width: calc(50% - 20px) !important;
		max-width: calc(50% - 20px) !important;
	}
}

In the above CSS you may want to adjust the 480px width to whatever you may deem to be a mobile appropriate size. The two column layout will only be applied when the screen is smaller than or equal to this value.

(B) Masonry Issues

1. The bottom is not even. This is simply how Masonry works. It is designed to be displayed with multiple rows of items with the next row interlocking into the bottom of the previous “filling” the gaps.

Solution: None – This is simply how it works.

(C) Tablet Landscape Image

The gallery itself is set to use 100% width of whatever element it is placed into. In the screenshot you provided yes, the template is responsible for a little bit of the left and right indent but the majority of it is your content wrapper limiting the available width.

Solution: Custom CSS – You would need to adjust your themes content wrapper to allow the gallery to use more of the page width.

(D) Mobile Portrait Image

See the first response regarding the Portfolio template and it’s solution. That solution should also resolve the issue displayed here.

Maybe I’m wrong, but I don’t understand the code well. But, you need to solve this problem by checking the box in the settings. For people who don’t know the code well, they use plugins where settings are easy to do. This way you will have more paid subscriptions for your application. ??

Can you tell me in which file to change these code settings?
Thank you, best regards.

Hi @irina1975,

Apologies I didn’t say where to put it as this is also just CSS as the previous replies were. You should be able to place it in the same place you did previously when you were trying the previous answers.

Thanks