How can I move text to the top center of an image on Craft theme?

Store Design
1

I would like to move the text on my slideshow so that it is at the top center of the photo. I am using the Craft theme and I have tried to look at previous questions but the code edits did not work for me (or I didn’t put them in the right place). Can anyone please advise?

IMG_6C6B155FEC64-1.jpeg
IMG_6C6B155FEC64-1.jpeg1274×2407 261 KB

Thank you!

2

Hi @houseofhunter ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

www.shophouseofhunter.com

The store is not password protected.

Thank you!

4

Hi @houseofhunter ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-template--15746643525862__164781265870584c36 .banner__media {
        position: relative;
    }
    #shopify-section-template--15746643525862__164781265870584c36 .banner__media {
        order: 2;
    }
    #shopify-section-template--15746643525862__164781265870584c36 .banner__content {
        height: 230px !important;
        
    }
    #shopify-section-template--15746643525862__164781265870584c36 .banner__content .slideshow__text  * {
        color: #000 !important;
    }
    #shopify-section-template--15746643525862__164781265870584c36 .banner__content .slideshow__text .button {
        border: 1px solid #000 !important;
    }
    #shopify-section-template--15746643525862__164781265870584c36 .banner__content .slideshow__text .button:after {
        box-shadow: none;
    }
    
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

5

@houseofhunter

sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {.banner__content{align-items: start;}}
6

Please add below css in bottom of assets/section-image-banner.css file

@media screen and (max-width: 749px){

.banner__content {
align-items: flex-start;

}
}
Thank you.

7

This makes the text go to the top of the image, but I would like it on the image still, just at the top part of the image. Is there any way to do this? Thank you!

8

This makes the text go to the top of the image, but I would like it on the image still, just at the top part of the image. Is this possible? Thank you!

9

This change makes the text go to the top of the image, but I would like it on the image still, just at the top part of the image. Is there any way to do this? Thank you!

10

Hi @houseofhunter ,

You try below code in section-image-banner.css file:

@media (max-width: 749px) {
#shopify-section-template--15746643525862__164781265870584c36 .banner__content {
    position: absolute !important;
    top: 0 !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

11

This worked! Last question - is it possible to have the text color changed to white?

Thank you so much!!

12

Nevermind, I was able to change the color code.

Thank you everyone for your help!!

13

Hi @houseofhunter ,

I checked it’s white now

Screen Shot 2022-03-21 at 8.27.00 PM.png
Screen Shot 2022-03-21 at 8.27.00 PM.png2880×1800 494 KB