Minimal theme - extend slideshow to full width

anniemittry
Tourist
10 0 5

Hi there,

I'm using the Minimal theme and am having trouble getting the slideshow to extend to the full page width. I've tried adding custom CSS from other posts on this topic, but it hasn't worked for me - it looks like most of the previous posts are 5+ years old.

Can someone help me with this?

https://annieryanceramics.myshopify.com/

PW: pot

Thank you!

Replies 11 (11)

hashiromer
Shopify Partner
52 3 12

I can't see any slideshow, can you show a picture where you want to make changes?

anniemittry
Tourist
10 0 5

Yes - see attached. I added some code to remove the slideshow control buttons, so it just looks like an image.Screen Shot 2021-10-28 at 9.17.28 PM.png

hashiromer
Shopify Partner
52 3 12

Okay I see that, do you want it to be full screen on mobile or desktop or both?

 

By the way add those buttons when you go live because it is not at all obvious that it is a slide and if I couldn't know that neither would your customers. 

anniemittry
Tourist
10 0 5

I don't want to make it a slideshow - I actually just want it to be a single image for now.

I'd like it to be full width on mobile and desktop.

Thanks for your help!

Bossismail1
Excursionist
51 1 5

You will have to change the image with the normal image size and that is by to be full width in both mobile and desktop and in your store footer, you have powered by Shopify instead of powered by (store name), which I will love to help you in that .

Bossismail1
Excursionist
51 1 5

Okay, you want to make it a slide show if My right

hashiromer
Shopify Partner
52 3 12

This is a bit tricky actually because the spacing is controlled by the container and images are handled by a javascript script. The cleanest solution would be to restructure the layout, but I can't do it with just css alone, some of your theme code would need to be modified. 

If you could give me access to your storefront, I can directly make the changes there. This solution would also help with your site speed as well because I would remove javascript needed for slideshow. 

anniemittry
Tourist
10 0 5

Thanks for the explanation! Would it be possible/simpler to replace the section with a custom HTML section, and add the photo and text that way? Or would we still run into the container issue? FYI, in case it impacts anything, I just removed the Image and Text section that used to be above the slideshow section.

I'm not sure about granting access - is this something you can request?

anniemittry
Tourist
10 0 5

Let me know if you need any more info from me! Would love to figure this out and appreciate the help. @hashiromer 

diego_ezfy
Shopify Partner
2935 562 883

Hey,

For this type of issue, the best approach would be removing the elements via CSS.

Alternatively, there are options like this that allows you to add a Slideshow to any theme and customize it as per your wish, including removing the buttons and other features. 

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

dmwwebartisan
Shopify Partner
12280 2546 3694

@anniemittry 

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

.template-index main.wrapper>* {
    max-width: 100% !important;
}

.shopify-section:first-child .index-section {
    padding-top: 0;
    border-top: 0;
    max-width: 100% !important;
}

@media screen and (min-width: 769px){
.index-section {
    padding-top: 27.5px;
    padding-bottom: 27.5px;
    max-width: 1060px !important;
    margin: 0 auto !important;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app