How can I put title above the pic ? Garden & Home Residential should be on top of the image..
Topic summary
Goal: Move each multicolumn card’s title above the image (order: title → image → text) on a Shopify store.
Context and access: Store URL shared for review.
Proposals and progress:
- Initial guidance suggested adding code at the end of theme.liquid, but the provided code snippet appears empty in the post; a screenshot showed a result with the title on top.
- A CSS flex reorder was proposed (.card with display:flex and .card__info order:-1). This moved the text along with the title, which the requester didn’t want.
- Revised CSS solution (to place title at top while keeping image in the middle and text below):
- .card__media.media { margin-top: 40px !important; }
- .color-scheme .card__title { position: absolute !important; top: 0 !important; }
Screenshots show the desired layout.
Note: One repeated reply shows a selector with a space (“.card __media.media”), which may not match; the correct form appears to be “.card__media.media”.
Status: No final confirmation from the requester; solution appears provided but outcome unconfirmed. Attachments (screenshots) are central to understanding the visual result.
1 Like
Hello @hem0903
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.
Store url - https://e68fa2-2b.myshopify.com/
Hey @hem0903
Follow these Steps:
-
Go to Online Store
-
Edit Code
-
Find theme.liquid file
-
Add the following code in the bottom of the file above tag
RESULT:
If I managed to help you then, don’t forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Thanks for the help I want title image then text. This code shifting text to the top as well. I want image in the middle.
.card {
display: flex !important;
}
.card.color-scheme .card__info {
order: -1 !important;
}
Can you add this in last line file main.css
Thanks for the help I want title image then text. This code shifting text to the top as well. I want image in the middle.
1 Like
- Here is the solution for you @hem0903
- Please follow these steps:
- Then find the base.css or main.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.card__media.media {
margin-top: 40px !important;
}
.color-scheme .card__title {
position: absolute !important;
top: 0 !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
- Here is the solution for you @hem0903
- Please follow these steps:
- Then find the base.css or main.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.card__media.media {
margin-top: 40px !important;
}
.color-scheme .card__title {
position: absolute !important;
top: 0 !important;
}
Copy
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.