Moving Product Title Above Product Image on Mobile

[vmstore]

I searched for this on the forum but I couldn't find anything related to specifically using Dawn theme..

Basically I want to move my product title above the product image on mobile. It currently shows below the image, which can make it hard for the visitors to see the respected image that goes along with each product image as it creates more distant between the images itself and the options below.

Please help. 

@Jasoliya @KetanKumar @Musfirah @EcomRAZ @diego_ezfy 

[EcomRAZ]

Hi @vmstore ,

 Can you please share your website link?

[vmstore]

Sure thing here it is my website product page 

[GemPages]

Hi @vmstore,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

[vmstore]

Yep no problem. Here it is my website product page 

[PageFly-Kate · Accepted solution]

Hi @vmstore ,

This is Kate 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:

.product.grid {
    position: relative;
    padding-top: 100px;
}
.product.grid .product__title {
    position: absolute !important;
    top: 0;
}

I hope it would help you
Best regards,

Kate | PageFly

[vmstore]

Thank you Kate.  One issue though.. While that worked, it left the vendor name and review stars below the image. Anyway I can move those to the top as well?

[vmstore]

Nevermind, I had someone from the review app help me with that. THanks again KAte

[PageFly-Kate]

Hi @vmstore ,

You are welcome.
It's very pleasure to help you

Best regards,

Kate | PageFly

[Nasreen1]

Hi! I have the same problem as yours. I also want to move the product title and the product rating at the top of the product image but only on mobile. How did you solve it?

[Gil-Momo]

Hi Nasreen, did you figure out how to do it? we have the same issue.

[Gil-Momo]

Hi Vmstore,

We have exactly the same issue. Would it be possible fo you to share the code that you used to solve this?

[Gil-Momo]

Hi Kate, we are facing the same issue. We want to move the title, product, and some minor product descriptions above the product image only on mobile. Could you help us out?

[Mer2]

You need to add the size of the screens you want apply this to (ex. @media screen  and (max-width ....)) otherwise it won't work.