How to fix product title, review stars, and price spacing on mobile view?

Technical Q&A
1

Hello, can someone help me fix the spacing between the product title, review stars, and product price on the mobile home page view of my website. I would like to make it look like the product page.

This is the link to the website: [https://magicbabybowl.store](https://magicbabybowl.store/\)

1 Like
2

@magicbowl Go to assets/section-main-product.css and paste below css at bottom of file.

.product__title
{
margin-bottom: 0rem !important;
}

.product__info-container>*+*
{
margin: 0rem 0 !important;
}
3

@magicbowl ,

.product__info-container>*+* {
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

4

@magicbowl

.product__title {
    word-break: break-word;
    margin-bottom: -0.5rem !Important;
}

Add this code in the bottom of section-main-product.css file.

Thank you.