What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: DEBUT THEME - How to remove the white box in mobile version slides show?

Solved

DEBUT THEME - How to remove the white box in mobile version slides show?

Lolovic
Excursionist
28 0 4

Hi guys

1. I have removed the slick dots and arrow from the mobile version. How do I remove the white box from the mobile version as well?

2. How can I move the shop now button and/or other wordings to the bottom of the picture?

Thank you

fqeff.JPG

Accepted Solution (1)
oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Hello Lolovic,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

@media screen and (max-width: 749px){
.slideshow__text-wrap--mobile {
    background-color: transparent;
    top: -3.2rem;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 18 (18)

oscprofessional
Shopify Partner
16116 2410 3126

Hello Lolovic,
Please share your site url.
So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Lolovic
Excursionist
28 0 4

www.lovianco.com

Password: testing

oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Hello Lolovic,
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.css.liquid

@media screen and (max-width: 749px){
.slideshow__text-wrap--mobile {
    background-color: transparent;
    top: -3.2rem;
}
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Lolovic
Excursionist
28 0 4

It works perfectly. Thank you

RawCutSB
Tourist
7 0 3

I could not get this to work what exactly and where exactly do I past code in. You mention bottom do mean the very bottom of all code lines? 

gbanks789
Visitor
2 0 1

Thank you! This worked for me. Now, how do I move the button and text so that they do not lay directly over the image?

Ebcswim
New Member
5 0 0

Hi I got rid of the box over the picture but I have two slideshows and there is loads of padding underneath each one so there is a big white gap between each slide show, can you help??

oscprofessional
Shopify Partner
16116 2410 3126

@Ebcswim ,

Share the store URL with screenshot

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Ebcswim
New Member
5 0 0

HiOscprofessional, thanks for reply. It’s ebcswim.com but it’s password protected while I work but I can take off if you need. I used your above code and now looks like this: 

5D7946D5-2CFC-46D8-B739-80056788A061.png

3559FFAC-D2FD-4C39-94C6-931ED03A77E4.png

 ideally I would just like shop button on the bottom of the images, but I would be ok if not possible and button stays where it is, if there wasn’t these massive white gaps…….

thanks 

oscprofessional
Shopify Partner
16116 2410 3126

@Ebcswim ,

Password

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Ebcswim
New Member
5 0 0

Ebcswim - the live theme isn’t the one where i used your code I used that on a duplicate - but you can see the issues on this one perfectly - thanks 

Ebcswim
New Member
5 0 0

Hey osc, did you manage to look with the password ebcswim? Thanks 

oscprofessional
Shopify Partner
16116 2410 3126

@Ebcswim ,

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

div#shopify-section-16450244219d6b7b8c {
margin: 0;
padding: 0;
}
.slideshow__text-content.slideshow__text-content--mobile.slideshow__text-content--mobile-0.text-center {
padding: 0;
}
}

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
candyman1
Excursionist
17 0 5

I don't have a theme.css.liquid option. Could I just add this in the bottom of Theme.CSS?

oscprofessional
Shopify Partner
16116 2410 3126

@candyman1 ,

Yes

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Fashionfactor
Visitor
1 0 0

Hi There, it worked but the font color on the mobile become black, how can i turn it to white.

 

thanks 

oscprofessional
Shopify Partner
16116 2410 3126

@Fashionfactor ,

Please share the screenshot.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
Prettypups1
Visitor
1 0 0

Hey!

 

My Asset's folder doesn't have 'theme.css.liquid' Please advise.