Hello everybody, I just purchased the Boost theme for my e-commerce store. I was wondering how to make the images in the slideshow wide enough to reach the border when viewing on a desktop?
@oshayh can you share the store URL?
go to assets > styles.css and put this css bottom of file
.full-width-slideshow {
padding-left: 0;
padding-right: 0;
margin-top:0;
}
.full-width-slideshow .page-width.relative {
width: 100% !important;
max-width: 100% !important;
}
.full-width-slideshow .slick-track {
width: 100% !important;
}
.full-width-slideshow .slick-initialized .slide {
width: 100% !important;
}
@oshayh
- Go to Online Store->Theme->Edit code
- Asset->/styles.css ->paste below code at the bottom of the file.
#shopify-section-template--15266168733851__slideshow .container {
padding: 0;
margin: 0;
}
#shopify-section-template--15266168733851__slideshow .container .page-width {
max-width: 100%;
}
can you please try this code
It worked for the most part, is there another code to get rid of the white space in between the menu and the picture?
I used the first code provided to me, but now, I have another issue. Thank you as well!
I have updated css code use it.
I used your code, is there a way to get rid of that space between the menu and the slideshow?
1 Like
@oshayh
yes, please add this code also
.container.container--no-mobile-padding.large-row.full-width-slideshow.full-width-background.relative.section-template--15266168733851__slideshow {
margin-top: 0;
}
Use the updated css replace the previous one with this
.full-width-slideshow {
padding-left: 0;
padding-right: 0;
margin-top:0;
}
.full-width-slideshow .page-width.relative {
width: 100% !important;
max-width: 100% !important;
}
.full-width-slideshow .slick-track {
width: 100% !important;
}
.full-width-slideshow .slick-initialized .slide {
width: 100% !important;
}
1 Like
It worked, thanks!
You welcome!