Text alignment (debut theme)

Solved
magnusgustaf
Tourist
8 0 4

Hi!

 

Have a problem with the text on the slide show. 

 

I looks good on desktop but not mobile and I cannot find out why the text appears on the left side. However the button gets centered. See second slide. Is it possible to keep the text like this on desktop but have the button below the text, and at the same time use the whole width when on mobile and center the button? 

 

swim-ears.myshopify.com 

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
11517 1806 2310

This is an accepted solution.

@magnusgustaf ,

.slideshow__btn-wrapper.slideshow__btn-wrapper--push {
    max-width: 50%;
}
@media only screen and (max-width: 749px) {
h2.h1.mega-title.slideshow__title.slideshow__title--mobile {
    max-width: 100%;
    font-size: 21px;
}

}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing

View solution in original post

Replies 4 (4)
oscprofessional
Shopify Partner
11517 1806 2310

@magnusgustaf ,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

 

.slideshow__btn-wrapper.slideshow__btn-wrapper--push {
    max-width: 50%;
}

 

 

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
11517 1806 2310

@magnusgustaf ,

Have you hidden the button I was adjusting the button on the mobile version?

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
magnusgustaf
Tourist
8 0 4

It's the button shown for the second slide, see screen shot below. However I wish any changed to apply to all slides if I also add buttons there. 

magnusgustaf_0-1651154196095.png

 

oscprofessional
Shopify Partner
11517 1806 2310

This is an accepted solution.

@magnusgustaf ,

.slideshow__btn-wrapper.slideshow__btn-wrapper--push {
    max-width: 50%;
}
@media only screen and (max-width: 749px) {
h2.h1.mega-title.slideshow__title.slideshow__title--mobile {
    max-width: 100%;
    font-size: 21px;
}

}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing