Solved

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

goatcardz
Tourist
4 0 1

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.

Accepted Solutions (2)
made4Uo
Shopify Partner
3833 716 1167

This is an 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

made4Uo_0-1655867968100.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

made4Uo
Shopify Partner
3833 716 1167

This is an 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
}
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 6 (6)

VIEKIN
Shopify Partner
662 79 94

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!

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
goatcardz
Tourist
4 0 1
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
Shopify Partner
3833 716 1167

This is an 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

made4Uo_0-1655867968100.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
goatcardz
Tourist
4 0 1

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
Shopify Partner
3833 716 1167

This is an 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
}
}
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
goatcardz
Tourist
4 0 1

Thank You. It worked!