DAWN THEME: MOBILE PRODUCT GRID

[skymochi]

1. How do I shorten my product grid aspect ratio to be 4:5? MOBILE ONLY

2. How do I center my product name and price? DESKTOP & MOBILE

koredoko.com

[skymochi]

Do you have a CSS for this?

[Made4uo-Ribe]

Hi @skymochi

Do you mean center the prodcut title of the image, like this?

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media (max-width: 768px) {
    #product-grid .grid__item {
        height: 40vh;
    }

    #shopify-section-template--16565351809097__product-grid .card__content {
        top: 40%;
    }
}

#shopify-section-template--16565351809097__product-grid .card__content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

And Save.

result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[skymochi]

thank you—this worked for mobile but not for desktop. Could you help troubleshoot?

[Made4uo-Ribe]

in your base.css file you miss place one closing bracket.

Remove the last one and add into the line 3784 like this.

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!