How can I adjust main slideshow text position for different devices?

[goatcardz]

Website is www.goatcardz.ca

I want to change it so  the main slideshow text is to middle left on PC and centered to the bottom on mobile. How can I do this?

Thanks in Advance.

[made4Uo · Accepted solution]

Hi @goatcardz,

I think you meant the whole textbox which includes the button. If so, just follow the instructions below.

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Open the base.css file under the Asset folder
3. Add the code below.

@media only screen and (max-width: 750px) {
.slideshow__slide-inner .content-box.content-box--medium {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: auto;
}
}

Your slideshow should look like below

[DitalTek]

hi @goatcardz ,

For your issue, we can be solve by css style. But the first i suggest for you should be check on settings theme. You can go to customize theme settings and then going to Banner settings and check at here and find the setting for position of text on banner. 
If the theme not support, we can solved by style with css.

Don't hesitate contact to me if you need help about technical, thanks!

[goatcardz]

Hi, theme does not support 2 different positions for mobile and PC. Can
only set it to 1. Please help with CSS. Thank You.

[made4Uo · Accepted solution]

Hi @goatcardz,

I think you meant the whole textbox which includes the button. If so, just follow the instructions below.

1. Go to Admin > Online store > Themes > Actions > Edit code
2. Open the base.css file under the Asset folder
3. Add the code below.

@media only screen and (max-width: 750px) {
.slideshow__slide-inner .content-box.content-box--medium {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    margin: auto;
}
}

Your slideshow should look like below

[goatcardz]

Hi,

Added to Theme.css I can't see base.css here.

I tried this horizontally worked good, vertically needs to be at bottom. Can you check now?

[made4Uo · Accepted solution]

Hi @goatcardz,

Sorry about that, you can add the code below to have it at the bottom.

@media only screen and (max-width: 750px) {
.slideshow__slide-inner {
    align-items: flex-end !important
}
}

[goatcardz]

Thank You. It worked!