Hi team,
Look to adjust so my heading sits above the image in dawn.
Topic summary
A user seeks help repositioning a heading to appear above an image in the Dawn theme on their Shopify store (brew2you.au).
Solutions Provided:
Multiple support teams offered similar CSS-based fixes:
- Common approach: Navigate to Online Store → Theme → Edit code, then open the
base.cssfile - CSS code to add: Apply
flex-direction: column-reverseto the.image-with-text__grid--reverseclass within a media query targeting screens with max-width of 767px - Effect: This reverses the flex layout order, placing the heading above the image on smaller screens
Contributors:
Responses came from niraj_patel, GemPages support team, and PageFly-Victor, all providing nearly identical CSS solutions with minor formatting variations. The discussion includes code snippets and screenshots demonstrating the implementation steps. No follow-up from the original poster indicates whether the solution was successfully implemented.
1 Like
Hello @brew2you
You can add code by following these steps to show heading first and image after
-
Go to Online Store → Theme → Edit code.
-
Open your base.css theme file
-
Paste the below code at the bottom of base.css
@media only screen and (max-width: 767px) {
.image-with-text__grid–reverse{
flex-direction: column-reverse !important;
}
}
Hello @brew2you
It’s GemPages support team and glad to support you today.
- Go to Online Store → Theme → Edit code
- Open your base.css file and paste the following code below:
@media only screen and (max-width: 767px){
.image-with-text__grid--reverse{
flex-direction: column-reverse;
}
}
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
Hi @brew2you
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly