Archived topic
adjust space of related products mobile view
13 replies · Started by José on May 12, 2019
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
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 :)
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}
}Can you link me to the site in question?
OK, sent
Can you clear and disable the caching plugin first?
the staging environment has caching disabled.
I do not have the option to disable it.
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.
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
Just a warning. I tested the code and it should work.
Yes, if it works, I thought that if you mark a warning, it could not be added ...
Nope warnings are just warnings. I think WordPress needs to update Additional CSS that's all.
Looks like it's working?
Ok, I understand ... if it works.
Thank you
No problem :)
