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:

decalaveras

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 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:

decalaveras

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.

• images
• css
• gallery
• responsive

• I visited your site, but it already performs the responsive behavior you describe. Could you clarify your issue? – bosco Commented 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){
    .gallery-item{
        max-width: 50%;
    }
}

@media(max-width: 480px){
    .gallery-item{
        max-width: 100%;
    }
}

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