Shopify themes, liquid, logos, and UX
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!
I can't see any slideshow, can you show a picture where you want to make changes?
Yes - see attached. I added some code to remove the slideshow control buttons, so it just looks like an image.
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.
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!
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 .
Okay, you want to make it a slide show if My right
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.
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?
Let me know if you need any more info from me! Would love to figure this out and appreciate the help. @hashiromer
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
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!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024