neve theme two column mobile gallery

Resolved saeed
(@saeedr)

1 year, 6 months ago

Hi
How can i set a gallery on Neve theme this way?
two column for mobile gallery
three column for tablet gallery
and 4 column for desktop gallery

Shall I used custom CSS? or is it possible by default theme settings?

Viewing 4 replies - 1 through 4 (of 4 total)

Stefan Cotitosu
(@stefancotitosu)

1 year, 5 months ago
Hi @saeedr,

Thank you for using Neve.

This should be possible with the default Gallery block, by adding the following code to the Additional CSS editor within the Customizer.
```
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    	width: 100%;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    	width: 49%;
	}
}
@media (min-width: 901px) {
	.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image:not(#individual-image) {
    	width: 24%;
	}
}
```
I hope this will help.
Thread Starter saeed
(@saeedr)

1 year, 5 months ago
Hi @stefancotitosu ,

Thank you for your reply,

Desktop and mobile are working fine by default, but it’s not functioning properly on tablets (I mean the custom CSS didn’t worked).
here is the test URL https://1stlove.ir/page-sample/

I searched through the old support tickets related to the NEVE theme, and in one of the answers from your colleagues, she mentioned that the breakpoints in Neve are set at 576px for mobile, 959px for tablets, and the desktop view begins at 960px.
- This reply was modified 1 year, 5 months ago by saeed.
Thread Starter saeed
(@saeedr)

1 year, 5 months ago
I changed the CSS code to This and it worked!
```
@media (max-width: 600px) {
	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
    	width: 49% !important;
	}
}
@media (min-width: 601px) and (max-width: 900px) {
	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
    	width: 32% !important;
	}
}
@media (min-width: 901px) {
	.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) {
    	width: 24% !important;
	}
}
```
but about the breakpoint in NEVE theme
which ones are correct? the one you mentioned or the one your colleague mentioned in old Support Threads?
- This reply was modified 1 year, 5 months ago by saeed.
Stefan Cotitosu
(@stefancotitosu)

1 year, 5 months ago

Hi @saeedr,

Thank you for the confirmation, I’m glad to hear that adapting the code helped in resolving the issue.

The breakpoints shared by my colleague should be the correct ones. I provided the CSS snippet as an example so you can use it by adapting the breakpoints as you need.

Regards,
Stefan

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘neve theme two column mobile gallery’ is closed to new replies.