• Resolved saeed

    (@saeedr)


    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)
  • 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)

    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 10 months, 3 weeks ago by saeed.
    Thread Starter saeed

    (@saeedr)

    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 10 months, 3 weeks ago by saeed.
    Stefan Cotitosu

    (@stefancotitosu)

    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.