How to force WP Gallery to display 3 columns on mobile

  • Hello!

    What CSS or PHP code can I add to my custom CSS area or my functions.php file respectively to get the WP gallery to display as 3 columns on a mobile device? No matter what I try, it only displays in two columns.

    I’ve been trying to find the solution to this for a few days now, and I’ve tried lots of free things like many different free gallery plugins, many different CSS coding, and some PHP stuff. I feel like there is a free solution out there, but my CSS and/or my PHP skills just aren’t great enough to figure it out. I’m trying to avoid paying for a plugin or service.

    Thank you!

    The page I need help with: [log in to see the link]

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

  • If you are using the new editor (Gallery block), then there is CSS which is very specific being output by the block definition.
    If not, then it is a normal gallery and your theme is responsible for the CSS, unless you use a plugin for galleries, in which case it’s the plugin that is responsible.

    In your case, it looks like a gallery block, which is the hardest one to change.
    You can use your browser Developer Tool to see what CSS rules affect the gallery, and write some rules to override those. Good luck…

    Thread Starter inkerdoo

    (@inkerdoo)

    I’ve been trying to view the page source, inspect element, and making custom CSS to alter what’s there, but I haven’t hit on the right combination yet. I can make it look right in the css editor area, but when I view it on an actual mobile device, nothing changes.

    How do I use a normal gallery and not the Gallery block?

    When you put your CSS into your theme, you need to make the browser load the new version, since most browsers cache files where they can. That’s usually done by changing the theme version number, if the theme author did it correctly. If the author didn’t do it correctly, it’s using the WP version number instead.

    When you change the Additional CSS, it is put directly into the page, so there are no version numbers that will tell the browser that the page changed. You can hit Reload in your browser, but some browsers have to be told to clear their cache to get the new version. This will apply not only to you, but to every repeat visitor.

    If you want to switch from Gallery block to normal gallery, you can use a Shortcode block with a gallery shortcode, or a Classic block with a normal gallery in it, or build your own in a HTML block.
    Or you could use the Classic Editor (either per page or for all pages).

    Thread Starter inkerdoo

    (@inkerdoo)

    I’ve created a gallery with the classic editor, but I still can’t figure out how to make it display three columns in mobile view. There are multiple classes in a single element, and I don’t know how to reference classes with multiple names like that.

    Thread Starter inkerdoo

    (@inkerdoo)

    I went back to the blocks gallery block because that at least gave two columns in mobile view.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to force WP Gallery to display 3 columns on mobile’ is closed to new replies.

Tags