Mobile Formatting Issue - Removing hyperlink underneath heading

Store Design
, , , ,

Topic summary

A user encountered a mobile formatting issue in Shopify’s Ride 11.0 theme where hyperlinks appeared beneath multicolumn headings, even after adding custom CSS to create a button at the bottom.

Attempted Solutions:

  • Initial CSS targeting .multicolumn-card .link with display: none failed
  • Enhanced CSS with !important flag and more specific selectors also didn’t resolve the issue
  • Liquid code editing was suggested as the most reliable fix, involving removal of <a> tags in multicolumn.liquid

Complications:

  • The exact code structure differed from examples provided
  • Removing the link tags caused worse formatting issues with the scrolling multicolumn setup
  • Shopify marked certain elements as required, preventing deletion

Resolution:
The user ultimately decided to remove the button feature entirely rather than continue troubleshooting. The helper requested the solution be marked as accepted, though the original issue wasn’t fully resolved through the suggested methods.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

When switching to mobile view for multi-columns, the button becomes a hyperlink underneath the heading. (Theme - Ride 11.0)

I’ve added custom CSS to get a button on mobile at the bottom of the multicolumn, however, the hyperlink underneath the heading is still there. Could someone advise on how to remove the link underneath the heading?

Thanks

2

image
image426×669 28.1 KB

3

Hi @TR_AC,

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 749px) {
  .multicolumn-card .link {
    display: none;
  }
}

If that work, please mark my comment as solution.

Thank You!

4

Hi,

Tried that out, and it didn’t seem to work. Is there any liquid code you could recommend?

Thanks

5

Hi @TR_AC,

Try this:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (max-width: 749px) {
  .multicolumn-card-wrapper .multicolumn-card__info .link {
    display: none !important;
  }
}

If the CSS above still doesn’t work, editing the Liquid code is the guaranteed way to fix this. This method removes the link from the code itself, so the browser doesn’t even render it. This is the cleanest and most reliable solution.

  1. In the theme code editor, go to the Sections folder on the left.
  2. Find and click on multicolumn.liquid to open it.

Remove the Opening Link Tag:
Find this code, use ctrl + F to find:

<a href="{{ block.settings.link }}" class="multicolumn-card-link">

Remove the Closing Link Tag:

</a>

Delete these lines,
Apply and Save your changes.

hope it will work, Thank You!

7

I tried the second CSS method, didn’t work and then when I search for that line in the liquid code this is the closest version of the line from your message

Would that work if I removed it? When I attempt to remove it, Shopify marks it as required so unsure what to do next.

Thanks
9 
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">
10 
<a href="{{ section.settings.button_link }}" class="link underlined-link large-up-hide">

Look where the <a> tag of this line is closing , and remove it.

11

When I remove it, the formatting on mobile gets worse, as we have the multicolumn setup for scrolling. Unsure of a workaround, any thoughts?

12

I can’t see it, is it fixed?

image
image409×530 23.9 KB

13

Apologies, we’ve decided to remove the button entirely now. Appreciate your help, otherwise! Thanks

14

Please mark my comment as Solution.

Thank You!