Center Link Text Overlay on Multi-Column card

[Danceddiction]

I’d like to center this text on a multicolumn element I have in Dawn 15.0.0 theme.

I managed to get the link to overlay over the image, but now if the link title is two words it looks off centered. I’ve tried to adjust the “top” tag for the section but then single line texts are not centered. How do I make sure text will always be centered on this overlay?

“Brazilian Zouk” does not look centered but everything I have tried so far makes the single line text “Salsa” or “Bachata” look too high.

[BSSCommerce-HDL]

Hi @Danceddiction , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[Danceddiction]

Here is the link

Password: testword

For clarity we need it centered vertically, not horizontal.

[BSSCommerce-HDL]

Hi @Danceddiction ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Made4uo-Ribe]

Hi @Danceddiction

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.multicolumn-card__info .link {
    margin: 0;
}

.multicolumn-card__info {
    padding: 0 !important;
}

#shopify-section-template--18442698621183__multicolumn_CEDcJ3 .multicolumn-card__info {
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%); 
}

And Save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Danceddiction]

This was really close but unfortunately is not working. It may be because I have changed some of the card/image sizes. The images and cards are exactly the size I want now, but the text is still not vertically centering.

I changed the layout from a single row to two rows, so maybe that is part of the issue.

[BSSCommerce-HDL]

Hi @Danceddiction ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Danceddiction]

This has worked really well for desktop. But now I am having some issues making sure things are centered on the phone-screen.

I’ve tried making similar adjustments using the calling out

@media (max-width: 748px)

but I get different results from my phone compared to Shopify’s mobile viewport.

Image from my iPhone Screen

Image from Shopify Viewport for Mobile

You can see the both aren’t centered vertically or horizontally - So I need to adjust it a bit more but my attempts are not working. So need to adjust just this section and make it work on mobile.

[BSSCommerce-HDL]

Hi @Danceddiction ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Danceddiction]

This worked perfectly thank you!