How do I centralise images under "Image & Services Block"

Store Design
, ,
1

Hi all, I am relatively new to coding a website and I am facing difficulties editing the image code for mobile interface.

On the desktop, the interface looks perfectly fine. However, on I am unable to centralise the images on the mobile interface. Is there any way I could solve this problem.

Here the link to my site - https://sugartreegelato.com/

Sugartree_MobileInterface.PNG
Sugartree_MobileInterface.PNG371×685 29.7 KB

Web Interface
Web Interface1862×845 88.7 KB

2

Hi @SugartreeGelato ,

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->/style.css->paste below code at the bottom of the file:

[data-section="BannerSection"] .col-12 {
    text-align: center;
}
[data-section="BannerSection"] .col-12 + .col-12 {
    margin-top: 20px;
}

I hope it would help you
Best regards,

Richard | PageFly

3

Hello @SugartreeGelato

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you.

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid theme file.

  3. Paste the below code before :

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

4

Hi Richard, I’ve tried your method and it works really well for the mobile interface!

However, I noticed that the desktop interface images are not align properly with the coding that you’ve shared. May I know if there is any way to ensure that the desktop images are properly align? Attached below is a photo of how the images look like with the code implemented.

ST_WEBSITE.PNG
ST_WEBSITE.PNG1075×846 110 KB

SugartreeGelato_0-1676475663772.png
SugartreeGelato_0-1676475663772.png1075×846 110 KB

1 Like
5

Hi @SugartreeGelato ,

I’m sorry to hear that. Please give it a try with this new solution:

You can try replace previous my code by below code:

@media screen and (max-width: 575px) {
    [data-section="BannerSection"] .col-12 {
        text-align: center;
    }
    [data-section="BannerSection"] .col-12 + .col-12 {
        margin-top: 20px;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like
6

Hi GemPages Support Team,

Really appreciate the code shared! When using the code, the mobile interface works perfectly. However, is there a way to enhance the code so that the images are not sticking to each other? Attached below is the photo where I’ve drawn arrow in which I would like to see white space between the images. This is because on the desktop interface, there are spaces between each row of images.

ST_Mobile.PNG
ST_Mobile.PNG500×857 50.9 KB

SugartreeGelato_0-1676476377093.png
SugartreeGelato_0-1676476377093.png1075×765 148 KB

7

Hi Richard,

Thank you very much for the help! The latest code sent works perfectly!

Really appreciate the help!

Best Regards,

Sugartree Gelato

1 Like