FROM CACHE - en_header

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

Solved
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)

Accepted Solutions
oscprofessional
Shopify Partner
13300 2024 2589

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;
}
}
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 18 (18)
oscprofessional
Shopify Partner
13300 2024 2589

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

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
Lolovic
Excursionist
28 0 4
oscprofessional
Shopify Partner
13300 2024 2589

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;
}
}
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
Lolovic
Excursionist
28 0 4

It works perfectly. Thank you

RawCutSB
Tourist
7 0 2

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
New Member
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
13300 2024 2589

@Ebcswim ,

Share the store URL with screenshot

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
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
13300 2024 2589

@Ebcswim ,

Password

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
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
13300 2024 2589

@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

 

 

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
candyman1
Excursionist
15 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
13300 2024 2589

@candyman1 ,

Yes

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
Fashionfactor
New Member
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
13300 2024 2589

@Fashionfactor ,

Please share the screenshot.

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
Prettypups1
New Member
1 0 0

Hey!

 

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