Incorrect display of galleries on mobile devices

Hello,

Are you asking how to make galleries show 3 columns on mobile devices?

Yes.

All right, just making sure.

The gallery shows only 2 columns on mobile devices to let each image be larger. If the gallery showed 3 columns on mobile devices, each image would be very small. If you still want to make it 3 columns, however, add this code to your custom CSS:

@media ( max-width: 682px ) {
	.gallery-columns-3 .gallery-item {
		max-width: 33%;
	}	
}

@media ( max-width: 682px ) {
.gallery-columns-3 .gallery-item:nth-child(3n+1) {
     clear: none;
	}
}

If you’d like to make the same changes to galleries with 4, 5, 6, 7, 8, or 9 columns, add this CSS as well. Replace the # with the number of galleries you’d like to display, and replace 100/# with 100 ÷ the number of columns (for example, if you were doing 4 columns, do 100 ÷ 4):

@media ( max-width: 682px ) {
	.gallery-columns-# .gallery-item {
		max-width: 100/#%;
	}	
}

@media ( max-width: 682px ) {
.gallery-columns-# .gallery-item:nth-child(#n+1) {
     clear: none;
	}
}

Disclaimer: I am not a professional web developer.

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: added disclaimer

Thank you!
I’ll try.

Great, let me know if it works.

Also, I realized I made a mistake. What I meant to type was:

If you’d like to make the same changes to galleries with 4, 5, 6, 7, 8, or 9 columns, add this CSS as well. Replace the # with the number of columns you’d like to display, and replace 100/# with 100 ÷ the number of columns (for example, if you were doing 4 columns, do 100 ÷ 4 to get 25%).

• This reply was modified 6 years, 2 months ago by carbybarby838. Reason: Added clarity