Dawn Theme - How to move Loox reviews and product title to above product image on mobile?

[shanagarryceo]

Wondering if there is code I can add to move the loox review star widget & product title to above the product image on mobile? And centre these if possible.

Thanks

[Mike-Consentik]

Hi @shanagarryceo ,

This is Mike from Omega

Could you leave a link to product page which has Loox Reviews on it, then I can check it for you.

[shanagarryceo]

Hi Mike,

Thanks for looking into this! Here is the link - https://easypackpro.com/products/travel-compression-cube?variant=44506212466962

[Dan-From-Ryviu]

You will need a custom code in main-product.liquid file to do that. 

[shanagarryceo]

Hi Dan,

Do you know what this code is?

[PageFly-Richard]

Hi @shanagarryceo ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .product {
        position: relative;
        padding-top: 120px;
    }
    .product .product__title {
        position: absolute;
        top: 15px;
        max-height: 52px;
        overflow: hidden;
        text-align: center;
    }
    .product #shopify-block-loox-rating {
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translatex(-50%);
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[shanagarryceo]

Hi Richard,

This is great, however the title is still positioned to the left, how could I amend this code to centre this? 

Also - is there a way to decrease the gap between the star rating and title?

[PageFly-Richard · Accepted solution]

Hi @shanagarryceo ,

You can replace previous my code by below code:

@media screen and (max-width: 749px) {
    .product {
        position: relative;
        padding-top: 120px;
    }
    .product .product__title {
        position: absolute;
        top: 15px;
        max-height: 52px;
        overflow: hidden;
        text-align: center;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product #shopify-block-loox-rating {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translatex(-50%);
    }
}

I hope it would help you
Best regards,

Richard | PageFly

[shanagarryceo]

Works perfectly Richard thank you