Text alignment (debut theme)

Solved
magnusgustaf
Excursionist
18 0 6

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)
oscprofessional
Shopify Partner
14793 2218 2707

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Skype : oscprofessionals-87 |
Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 4 (4)
oscprofessional
Shopify Partner
14793 2218 2707

@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%;
}

 

 

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Skype : oscprofessionals-87 |
Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
oscprofessional
Shopify Partner
14793 2218 2707

@magnusgustaf ,

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Skype : oscprofessionals-87 |
Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
magnusgustaf
Excursionist
18 0 6

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
14793 2218 2707

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

If helpful then Please Like and Accept Solution. Chat on WhatsApp | Skype : oscprofessionals-87 |
Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing