I have read about the subject in many blogs and forums but I have not achieved anything.

What I would like to do on my page is the following:


On this page, when accessed from mobile, it automatically goes from 3 columns to 1 column in the image gallery.

Does anyone help me get this?

I use the same theme, twenty sixteen.

  • I visited your site, but it already performs the responsive behavior you describe. Could you clarify your issue?
    – bosco
    Sep 19, 2018 at 16:15

1 Answer 1


They achieve this by using CSS Media Queries .

Here are the specific ones controlling the gallery width.

@media(max-width: 720px){
        max-width: 50%;

@media(max-width: 480px){
        max-width: 100%;

Add those into your style.css and see if they work.

  • I've added it to the end of the style.css file and it keeps showing 3 columns on mobile device Sep 18, 2018 at 17:12
  • you will need to use the browser inspector to try to figure it out. maybe container divs have a different class or they are being overwrote by something else Sep 18, 2018 at 17:13
  • you can check my page here: desupervivencia.top Sep 18, 2018 at 17:16
  • I edited the styles to use max-width. Copy the above and paste them at the end of your style.css file. I tested this on your site and it should work Sep 18, 2018 at 17:28
  • Now it works for me. I do not know why it works only in an incognito window Thank you very much very kind. And forgive my fatal English Sep 18, 2018 at 18:15

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