0

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.com

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.

Improve this question
1
  • 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

Reset to default
0

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.

Improve this answer
5
  • I've added it to the end of the style.css file and it keeps showing 3 columns on mobile device
    – Diego Sánchez
    Commented 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
    – RiddleMeThis
    Commented Sep 18, 2018 at 17:13
  • you can check my page here: desupervivencia.top
    – Diego Sánchez
    Commented 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
    – RiddleMeThis
    Commented 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
    – Diego Sánchez
    Commented Sep 18, 2018 at 18:15

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