Gallery adjustments debut theme

Mareka
Trailblazer
209 1 27

Hi All,

I am using debut theme & have been having some frustrating issues with my gallery. When there are 2 gallery sections one after the other, there is an overlap. The bottom image overlaps the bottom of the top image. It seems to only be a problem on desktop.  I would also like to have a little bit of space between between images & gallery sections. I am currently working on a draft copy of my store - https://w9upmbcy6qce2l7s-34503295108.shopifypreview.com.  If anybody can help if would be greatly appreciated.

Inkedgallery overlap_LI.jpg

0 Likes
dmwwebartisan
Shopify Partner
7346 1736 2319

@Mareka 

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

#shopify-section-16245818816a06d8f0 .image-bar {
    overflow: unset !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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Mareka
Trailblazer
209 1 27

@dmwwebartisan 

Thanks, but my 2nd gallery has now disappeared & there is just white space instead.

0 Likes
dmwwebartisan
Shopify Partner
7346 1736 2319

@Mareka 

Please remove previous css class i will send you new css class .

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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Mareka
Trailblazer
209 1 27

@dmwwebartisan 

Sorry, I don't know what you mean by CSS class

0 Likes
Mareka
Trailblazer
209 1 27

@dmwwebartisan 

I also get an overlap when I add an "image with text overlay" under my slideshow. The slideshow dots disappear & the pause button sits at the top of the image below.

image overlap.JPG

0 Likes
dmwwebartisan
Shopify Partner
7346 1736 2319

@Mareka 

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

@media only screen and (min-width: 750px){
#shopify-section-162458190444d2be16.index-section {margin-top: -40px !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 | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
7346 1736 2319

@Mareka 

I also get an overlap when I add an "image with text overlay" under my slideshow. The slideshow dots disappear & the pause button sits at the top of the image below.

Solution 

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

@media only screen and (min-width: 750px){
[class*=index-section--flush]+[class*=index-section--flush] {
    margin-top: -40px !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Mareka
Trailblazer
209 1 27

@dmwwebartisan 

That is fantastic thanks heaps. I would also like to have a bit of space between the gallery images in each section please ?

dmwwebartisan
Shopify Partner
7346 1736 2319

@Mareka 

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

@media only screen and (min-width: 750px){
.template-index .index-section {padding-bottom: 40px!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 | Bag is a cart drawer that maximizes your sales. View app →
0 Likes