Hi! I’m working on setting up my site and there isn’t any space between my product image and the title on the home page or in collections pages. You can see an example below:
Does anyone know how to fix this? Thanks!
Would you mind sharing your store’s URL so we can provide a solution for this? Thanks!
Of course - https://wildlyenough.com/
@wildlyenough , do this to fix it in 20 seconds:
- In your Shopify Admin go to: online store > themes > actions > edit code
- Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.grid-view-item__title{
margin-top: 20px;
}
@media (max-width: 767px){
.grid-view-item__title{
margin-top: 10px;
}
}
You can change the values as per your wish:
20px = spacing for desktop
10px = spacing for mobile
Kind regards,
Diego
1 Like
@diego_ezfy that didn’t work. But I’m thinking it might be because of the “reveal” module I put in?
This is what has been added to my theme.css:
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{
display:block;
}
.has-.grid-view-item__link:hover img.grid-view-item__image{
display:none;
}
}
secondary
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{
display:none;
}
}
.grid-view-item__title{ margin-top: 20px; } @media (max-width: 767px){ .grid-view-item__title{ margin-top: 10px; } }
The code I shared does work. The piece of code you shared contains broken CSS, like the “secondary” standing by itself. I’d recommend removing whichever code you added.
Kind regards,
Diego
Is there a better way to get a secondary photo to show upon hover over a product? Because that added code worked to do that, it just compressed the space between the image and the product name.