Title above Image on product page - Dawn theme - only for mobile

Topic summary

A user needs to reposition the product title above the image on mobile devices in the Dawn theme.

Proposed Solution:
A CSS code snippet was provided to add to the base.css file, targeting screens under 429px width. The code adjusts:

  • Grid item padding
  • Product title font size and margins

Current Status:
The solution did not work as intended—the title disappeared after implementing the code. The issue remains unresolved, with another user asking how the problem was eventually solved, suggesting the thread may have continued elsewhere or the original poster found an alternative fix.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.

Hello @Vladut ,

In Shopify Admin, navigate to “Edit theme code”, then open the “base.css” file and add the following code at the end:

@media screen and (max-width: 429px){
.grid--peek.slider .grid__item:first-of-type {
    padding-top: 54px !important;
}

.product__title{
    margin-top: -74vh !important;
    margin-bottom: 62vh !important;
}

.product__title h1{
  font-size: 26px !important;
}
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!