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.

  • I visited your site, but it already performs the responsive behavior you describe. Could you clarify your issue? – bosco Sep 19 '18 at 16:15
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.

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

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.