How to change shopify gallery section to fit page container width rather than full screen in Debut

Solved

How to change shopify gallery section to fit page container width rather than full screen in Debut

Peeledeye
Excursionist
16 1 13

Hi can anyone help with this? In Debut theme the default width for the 4 image gallery section is full screen. I would like it to  align with the image with text ovelay section which fits to the page width. Is this possible?

 

I am happy with the images appearing on top of each other in mobile view but would prefer some padding (white space) between them and on either side.

 

Many thanks for any help!

Accepted Solutions (2)

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @Peeledeye ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

#shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 55px;
}
@media screen and (max-width: 749px) {
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar {
        padding-left: 7px;
        padding-right: 22px;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @Peeledeye ,

 

You can try below code in theme.css file:

@media screen and (max-width: 749px) {
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar__content,
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar__item{
        height: auto !important;
    }
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .ratio-container:after{
        padding-bottom: 125%;
    }
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .grid__item ~ .grid__item {
        margin-top: 15px;
    }
}

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 5 (5)

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @Peeledeye ,

 

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

#shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 55px;
}
@media screen and (max-width: 749px) {
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar {
        padding-left: 7px;
        padding-right: 22px;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Peeledeye
Excursionist
16 1 13

Hi @PageFly-Richard thank you so much that works! 

 

Looks perfect on desktop. I figured out a way to add a bit of space padding horizontally between the images. In the mobile scroll view images are vertically aligned and I am seeing padding on either side but none in between the images. Is there any way of putting 10-15px space between them in the mobile view too? Also they are cropping more in the mobile view.. not sure if anything can be done about that? Thanks again for your help, much appreciated.

PageFly-Richard
Shopify Partner
4400 1006 1657

This is an accepted solution.

Hi @Peeledeye ,

 

You can try below code in theme.css file:

@media screen and (max-width: 749px) {
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar__content,
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .image-bar__item{
        height: auto !important;
    }
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .ratio-container:after{
        padding-bottom: 125%;
    }
    #shopify-section-94d76143-ff12-484a-951f-803204ddfd57 .grid__item ~ .grid__item {
        margin-top: 15px;
    }
}

 

I hope it would help you
Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Peeledeye
Excursionist
16 1 13

@PageFly-Richard  Genius! Thank you Richard that does everything I wanted. The images are now cropping perfectly on the mobile view too with some space between them. Excellent 😊

PageFly-Richard
Shopify Partner
4400 1006 1657

Hi @Peeledeye ,

 

Great! I'm glad that I can help 😊

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.