adjust space of related products mobile view

[José]

Hello, I am trying to adjust the space of the related products in the mobile view, I would like the space between them to be smaller. I found a grid screen that regulates this: grid-gap:15px

.wc-columns-container .products,.woocommerce .related ul.products,.woocommerce .up-sells ul.products{display:-ms-grid;display:grid;grid-gap:50px;width:100%}

you could help me apply this only for the mobile version ….

Thank you

[Leo]

Hi there,

You can try using @media to apply it only to mobile:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

Hello Leo, thanks for your help, look at it I tried it in several ways, this is the last one but it does not work …

@media (max-width: 768px) {
.woocommerce .related ul.products {display:-ms-grid;display:grid;grid-gap:15px}
}

this error marks me

[Leo]

Can you link me to the site in question?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

OK, sent

[Leo]

Can you clear and disable the caching plugin first?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

the staging environment has caching disabled.
I do not have the option to disable it.

[Leo]

Hmm are you sure about that? That would be inconvenient for sure.

Give this CSS a shot:

 .woocommerce .related ul.products, .woocommerce .up-sells ul.products {
    grid-gap: 20px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Make sure to clear your cache.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

This was answered by Kinsta support:

The Kinsta cache can not be skipped in the active site. In the staging, it was always diverted. If you need to test a particular page, you can attach it to the query string at the end of the URL to skip the cache. For example …
yourdomain.com/pagehere/?nocache

I added the css, but it keeps marking me error

[Leo]

Just a warning. I tested the code and it should work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

Yes, if it works, I thought that if you mark a warning, it could not be added …

[Leo]

Nope warnings are just warnings. I think WordPress needs to update Additional CSS that’s all.

Looks like it’s working?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[José]

Ok, I understand … if it works.

Thank you

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts