How to have the text in product grid show below the images on mobile?

[withaudette]

As you can see from mobile version, it currently looks messy with the text on the image, how do i bring the text down?

[Dan-From-Ryviu]

hi @withaudette

You can do that by adding this code to bottom of your custom.css file

@media (max-width: 749px) {
    html .card-wrapper .card-information { position: relative !important; }
}

[withaudette]

Thank you! However, now the cart button alignment and text size for each liner looks off after putting to the bottom, how do i make the text smaller?

[GTLOfficial]

Go to online store ----> themes ----> actions ----> edit code ----> theme.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
#shopify-section-template--24305477615915__product-grid * {
font-size: 11px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[withaudette]

The cart button is still blocking, is it possible to change the button to a “+” symbol on the bottom right of the product card image?