Multicolumn title should be on top

[hem0903]

How can I put title above the pic ? Garden & Home Residential should be on top of the image..

[Moeed · Accepted solution]

Hey @hem0903 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card.color-scheme.color-scheme--2.relative.flex.flex-col.h-full {
    display: flex !important;
    flex-flow: column-reverse !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Sangeetanahar · Accepted solution]

Hello @hem0903 

online store.....>edit code...>assets....>base.css

add the code bottom of the file

h3.h5.card__title {
    position: absolute;
    bottom: 101%;
}
ul.flex.flex-wrap.gap-x-theme.gap-y-6 {
    position: relative;
}

result will be

If this was helpful, hit the like button and accept the solution.
Thanks

[BSS-TekLabs]

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.

[hem0903]

Store url - https://e68fa2-2b.myshopify.com/

[Moeed · Accepted solution]

Hey @hem0903 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.card.color-scheme.color-scheme--2.relative.flex.flex-col.h-full {
    display: flex !important;
    flex-flow: column-reverse !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[hem0903]

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.

[BSS-TekLabs]

.card {
    display: flex !important;
}
    .card.color-scheme .card__info {
        order: -1 !important;
    }

Can you add this in last line file main.css 

[hem0903]

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.

[BSS-TekLabs]

- 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.

[Sangeetanahar]

hello @hem0903 

i can help you please share your website URL.

Thanks

[hem0903]

https://e68fa2-2b.myshopify.com/

[Sangeetanahar · Accepted solution]

Hello @hem0903 

online store.....>edit code...>assets....>base.css

add the code bottom of the file

h3.h5.card__title {
    position: absolute;
    bottom: 101%;
}
ul.flex.flex-wrap.gap-x-theme.gap-y-6 {
    position: relative;
}

result will be

If this was helpful, hit the like button and accept the solution.
Thanks

[BSS-TekLabs · Accepted solution]

- 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.