Adding 3 column images in a row on mobile

[f22london1]

Hi i currently have 3 column images which show on a row on desktop but not mobile - how can I fix this ?

Further more i want the images to be the links if this is possible please tell me.

[sahilsharma9515]

Hi @f22london1

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil

[f22london1]

My website is f22london.com

My 3 aims

1. Make the 3 column photos in a row on mobile

2. Make the Photos act as the Link rather then the words

3. Get rid of the word link below and instead the image will turn translucent on hover and display the words in the middle of the image : similar to palaceskateboards.com

[sahilsharma9515]

Hi @f22london1 The store is password protected, so can you please provide the password so that I can look into it and provide you the solution.

Best Regards

Sahil

[f22london1]

apologies for this, the password is : password123

[BSSCommerce-B2B]

Hi @f22london1 ,

You can try the following steps:

Step 1: Go to Theme → Edit Code

Step 2: Search for the file base.css.

Step 3: In the file base.css, press ctrl + f to find the following code:

.grid--1-col-tablet-down .grid__item

Here is the code you will find:

@media screen and (max-width: 989px) {
    .grid--1-col-tablet-down .grid__item {
        width: 100%;
        max-width: 100%;
    }
}

Then you should change ‘width: 100%’ to ‘width: 0px’ as follows:

@media screen and (max-width: 989px) {
    .grid--1-col-tablet-down .grid__item {
        width: 0px;
        max-width: 100%;
    }
}

Step 4: Save your code.

Result:

As for attaching a link to the image, you can share admin store access with me so I can make the edits for you.

I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!