Center the heading of the multicolumn on the spotlight theme

Hey there!

I need assistance on two things on my shopify store. Both things are on the homepage.

  1. The heading of the multicolumn… how do I make the heading centered? Right now, its aligned on the left hand side. But it will look so much better centered.

  2. The links below each column, where it says “Shop Now” how do I turn the link into a button? Either a black button or a green button.

You can view my website by going to www.BetterParksProject.com

Thank you in advance for any assistance you can give!!

Hi @JSPENCER0203 .

Here’s how to achieve that:

1: Go to Online StoreThemeEdit code
2: Search file base.css
3: Add the following code to the bottom of the fileSave

.multicolumn h2.title.inline-richtext.h0 {
  margin: 0 auto!important;
  width: max-content!important;
}

.multicolumn a.link.animate-arrow {
	padding: 10px 20px!important;
	border: 2px solid black!important;
	color: white!important;
	background: black!important;
}

The first block centers the multicolumn heading. The second one makes the links button-looking. Feel free to play around with values to get the style you like.

If done correctly, the result should be similar to this:

I hope this helps!

If your question was answered, please mark it as an Accepted Solution

Worked perfectly!! Thank you so much for your help :slightly_smiling_face:

Anytime! Glad I could help! :slightly_smiling_face:

Is there a way to make the heading centered on mobile? The desktop version looks perfect but the heading doesnt seem centered on my smartphone. Thank you in advance :slightly_smiling_face:

Sure, just add the text-align:center; rule to the first block.

It should be:

.multicolumn h2.title.inline-richtext.h0 {
  margin: 0 auto!important;
  width: max-content!important;
  text-align: center!important;
}

Absolutely perfect… thank you, thank you, thank you :slightly_smiling_face:

Anytime! :wink:

I tried this solution and it does not work for me. I am using the Spotlight theme, and I added the code to the end of the Base.css file and saved.