Center Align multi column button with title and text

Technical Q&A
1

Hi there, I’ve been trying to get the buttons of multi columns cards to align with the header/title of that card (Also have the text/description centred too).

I’ve attached a screenshot of the multi-columns at the moment.

Thanks in advance!

multicoloumn.PNG
multicoloumn.PNG1167×607 108 KB

2

Hi @animeroom ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

I have sent you a private message. I hope to hear back from you soon!

4

Hi @animeroom ,

The link you sent me doesn’t seem to be the theme you want to do. We checked the homepage and didn’t see the part you want to edit. Can you send a preview link of the correct theme you want to tweak?

Screen Shot 2022-03-19 at 7.51.38 AM.png
Screen Shot 2022-03-19 at 7.51.38 AM.png2880×1800 614 KB

Thanks you

5

Hi there, thats odd I was sure I provided the URL for the offline theme I’m working on. Anyhow, sorry for that! And here is the preview link: https://5susmut7b3fax7rq-40981627031.shopifypreview.com

6

@animeroom

can you please try this code as per DM Comment

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px){
.slider.slider--tablet .grid__item {width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);}
max-width: calc(100% - var(--grid-mobile-horizontal-spacing) / 2);
}
7

Hi @animeroom ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-multicolumn.css->paste below code at the bottom of the file:
.multicolumn-card__info .icon-wrap {
    position: absolute;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

8

Thank you, this helped align the word “shop”. however, it still feels like the arrow itself is out of place.

I also wanted to ask if it is possible to make it so that the text containers in a row match the LARGEST container of that row? So I’ve given an example in a screenshot. ideally, I would like the “shop” button to be aligned throughout each row.

animeroom_0-1647701685692.png
animeroom_0-1647701685692.png1170×544 245 KB

Finally, I wanted to ask if it was possible to make the actual images themselves clickable and point to the given collection and also keep the button “Shop” so the user has two places they can click.

Thanks in advance!

9

I have replied to this in DM