How can I reposition the product title above product image on mobile view in Dawn theme?

[BuriedInWork]

How can I reposition the product title above product image on mobile view in Dawn theme?

[Ahmad31]

provide the link of your store

[BuriedInWork]

https://shop.buriedinwork.com/products/clear-kit-deluxe-physical

[Ahmad31]

• Go to Online Store > Themes > Edit Code.
• Open your theme.css or theme.scss.liquid file.
• Add the below CSS at the end of the file.
• Save and preview your store on mobile.

/* Reposition the h1 product title above the image on mobile */
@media (max-width: 767px) {
.product-title {
display: block;
margin-bottom: 10px; /* Add spacing as needed */
}

/* Make sure the image appears below the title */
.product-image {
order: 2;
}

.product-title {
order: 1; /* Ensure title is displayed first */
}
}

[BuriedInWork]

Hey Ahmed. I tried adding that to the theme.liquid page but nothing changed. Any other ideas? Thanks!

[Tech_Coding]

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767){
   .product{
       padding-top: 202px !important;
    }
    .product .product__title {
       position: absolute;
       top: -602px;
    }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BuriedInWork]

Thanks for the assist. Unfortunately, it didn't seem to change anything. Any ideas?