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

Store Design
, , ,
1

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

2

provide the link of your store

3

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

4
  • 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 */
}
}

5

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 on theme.liquid

@media screen and (max-width: 767){ .product{ padding-top: 202px !important; } .product .product__title { position: absolute; top: -602px; } }

Tech_Coding_0-1729000018121.png
Tech_Coding_0-1729000018121.png315×544 104 KB

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

6

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

BuriedInWork_0-1729005889004.png
BuriedInWork_0-1729005889004.png1437×996 88.3 KB

7

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