How to center text in multicolumn sections?

[myhairvitamins]

Hello, i need to center this title or text, anyone willing to help?

Multicolumn section.

Thank you 🙂

[VUMODigital]

Hi there,

This should be quite a quick fix - can you share your website URL so that I can take a look and see if I can find a solution for you?

Kindest regards

Iain 

[myhairvitamins]

Hey the website is not published, you can send a store invitation request

myhairvitamins.myshopify.com

the theme is named ”Sense Updated Theme Version 3.0.0”

thank you so much

[VUMODigital · Accepted solution]

Hi there!

Thank you for granting access and I've created a mock-up of the text above one of your multicolumn rows (see below)

I've applied this to your theme by adding the following code to the very bottom of your theme's .css file:

.multicolumn .title{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

If you visit your website and head to the customiser, you can now add any text that you wish and it will appear centered.

Once you've added the text, refresh your webpage and you should see it visible on your site.

I hope this helps and please shout if any questions.

Kindest regards

Iain Beaumont

VUMO Digital

[myhairvitamins]

Hi thank you, the solution seems to work but you worked on the wrong theme.

The published theme is an old version. 

The theme i want the changes on is called "Sense Updated Theme Version 3.0.0"

I would be very thankful if you can add the code to "Sense Updated Theme Version 3.0.0" 

Thank you

[VUMODigital]

Hi,

Thank you for the clarification and I've added the code to the theme you mention above.

I have just checked it via the customiser and all is working.

Kindest regards

Iain

[myhairvitamins]

Thank you alot for your help

[myhairvitamins]

Hello again, the text is centerized which is good but in Mobile view it gets a little bit out of control

Please see image below. I tried padding, it doesnt help

Mobile view below:

Desktop view looks pretty OK

[VUMODigital]

Hi,

Thanks for the update and the note regarding mobile view.  

I've added a little extra code to bring the text down for mobile phone screens but you will need to inspect how this renders when using the multicolumn feature elsewhere, as other elements may overlap.

Code:

 @media screen and (max-width: 749px){
.multicolumn .title {
   top: 20px;
}
  }

Kindest

Iain

[myhairvitamins]

Thank you, is there any way to make the width more?