[Resolved] How to create a home gallery imatges responsive?

[Agustin]

Hello, my question:

How to create a Home page+ Gallery categoríes responsive and the mobile, only One Column ?

http://www.veoinformatica.com look my page

And thanks for your help

[Joni]

Are you asking how to do that?

If so, whatever CSS class(es) your images are using (the example is “gallery-class”), add this code at the end of your stylesheet:

`/* –:[ Media Queries ]:– */

@media only screen and (max-width: 768px) {
/* For mobile phones: */
.gallery-class {
width: 100%;
clear: both;
}

}

[Leo]

Hi there,

Looks like you’ve figured out?
https://www.screencast.com/t/NK1lRvHA

Let me know 🙂

[Agustin]

Hello, Thanks for the answers, but, I added the code that you tell me and it does not work in the generatepress

attached captures
added code mobile.css

desktop format

format mobile

any solution?

with the theme twenty fifteen theme works..but I wish it to be with generate press

thanks

[Agustin]

hello again I forgot, with twenty sixteen in the mobile version comes out perfect but I wish it to be with generate press

thanks

[Joni]

Well, you have to use whatever class *your* gallery images are using. I just gave you an example class and I specify SAID that was just an example in my original post. So go into your style sheet and find out what your specific class for your theme that is driving those gallery images and substitute gallery–class for that. Then you should have it. I’m not at my computer right now so I can’t view any source code.

[Agustin]

Sorry I found the solution with the codes you gave me

/* For displaying single column on mobile */

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

the only thing that only works for me in the section of additional ccs and not in the ccs mobile.ccs of generatepress

putting it in the additional css I do not know if it will hurt the performance

now to continue optimizing thanks tahnks

[Leo]

You definitely don’t want to add the CSS to mobile.css file or any of the theme’s core files.

CSS should be added using one of these methods:
https://docs.generatepress.com/article/adding-css/

[Agustin]

I thought you could add that code in the ccs core, Then there is no alternative but to add it to the additional CSS?

[Joni]

NEVER add your own changes to the core; they will be hosed during the next update. I did not realize you were putting the code in the mobile.css file. The code I provided *and any other custom css styles* should *always* go in your style.css file if you have created a child theme, or in the Additional CSS tab under “Customize” if you are using GP itself. That way, when GP is updated, your changes will be preserved.

[Joni]

And this advice applies not only to GP, but to any other theme you may be using. If you add your changes to the core, you’ll lose them during an update, plain and simple. That is why most people advocate creating a child theme unless you are making just minor cosmetic changes (in which case the Customizer is fine and dandy).

[Agustin]

ok then I will create a child theme, although I am not sure that it works directly by putting the css in mobile.css of the child

More thanks

[Joni]

Just put the code into the Customizer. Don’t make it harder than it has to be.

[Agustin]

oK more Thanks

[David]

Joni – thanks for you assistance.

[Author]

Posts