How can I modify the mobile product title position in Dawn theme?

Store Design
1

Hello,

I want to change the Position of my Product title but for mobile only (See the picture below).

This question was asked by an other user here.

@KetanKumar provided code to imply in the theme.css file but this solution didn’t work for my Theme (Im Using Dawn). I tried to put the code in the base.css file, as Dawn theme doesn’t have theme.css but it didn’t work. I assume the name of the product title is different in Dawn.

Can someone help to adjust the old solution to the dawn theme please?

Shop: ventureap.de

Product page: https://ventureap.de/products/kordelkette-anhaenger-gold-edelstahl

Untitled-1.jpg
Untitled-1.jpg1211×2000 200 KB

2

if anyone else is having the same problem:

I have found out how to adjust KetanKumars solution to dawn theme. But my coding knowledge is very limited so be careful with using this…

You go to assets → base.css

And paste this at the very bottom of the code:

@media screen and (max-width: 740px){
.grid__item.product__media-wrapper {
    position: relative;
    padding-top: 70px;
}
h1.product__title {
    position: absolute;
    top: 0;
    padding-top: 80px;
    font-size: 24px;
}
}

You have to adjust the padding and font size by yourself so it fits nicely.

The problem with this solution is, that the position of your product title and product pictures is fixed to a specific position, depending on the padding you used. So for example if you have a product with a much longer title than the rest of your products, the padding-top of the product pictures won’t be enough and the title will overlap with the picture.