How can I adjust the image and button layout in my website's multicolumn?

Store Design
1

Hello,

I would like to change some things in regards to the multicolumn on my website (right under “Shop our collections”): www.sevenaswim.com

There are two images in my multicolum (on the homepage) and each has a button/link to a page under them. Here are two things I’d like changed:

  1. I would like the Button/Link under each image to be moved up so that there is minimal distance between the Buttons and the images.
  2. I would like for it to be possible to click on the images (i.e. have each of the images linked to a page of my choosing) so that customers either can click on the button or the image.

If there are any questions please do let me know. Thank you in advance!

2

Hi @sevenes ,

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

.multicolumn-card {
    position: relative;
    padding-bottom: 60px;
}
.multicolumn-card .multicolumn-card__info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.multicolumn-card .multicolumn-card__info .link {
    position: absolute;
    height: 100%;
    width: calc(100% - 3rem);
    bottom: 20px;
    left: 1.5rem;
    display: flex;
    align-items: flex-end;
}
@media screen and (max-width: 740px) {
    .multicolumn-card .multicolumn-card__info .link {
        width: 100%;
        left: 0;
    }
}

I hope it would help you

1 Like