2

I want my WP default gallery to go from 4 columns on computer screens down to 2 on mobile devices.

  • Have you tried inspecting the element and using a mobile styling such as float:left;width:50%; for the individual columns? – DigitalDesigner Jun 28 '17 at 21:32
2

You can try using css to control the visual layout.

I have tested on my dev server and this was successful.

 @media only screen and ( max-width: 320px ) {
      .gallery-item {float:left;width:50% !important;}
 }

what we have done is set the column to 50% the total container width when viewing on devices smaller then 320px. You can adjust this as you see fit.

Simply drop this styling into your themes css via your theme options page. If you do not have one you can also add it to the themes css stylesheet if you have admin access through Appearance > Editor.

Try it out and hope it helps.

0

The secret to a responsive gallery is to not specify a column number. This will make it display gallery items until the items spill to the next line. Make sure gallery items are set to "display: inline-block."3 items will fit on an iphone x because I didn't set the # of columns on my clients site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.