Change alignment of title above multicolumn from "left" to "center"?

Technical Q&A
, ,
1

I am using the theme Sense. On the main page I have a multicolumn (3) underneath the top menu (no header). When I make the title above the columns font size Medium or Large, they are centered properly. However, when I change it to small, it becomes left justified and is farther left than the edge of the first column, looking wonky.

I have tried other solutions in the community by adding text-align: center everywhere I could find multicolumn-title (one by one and undoing each time), and have tried in base.css, multicolumn.liquid, you name it. I cannot for the life of me find where the code is directing that small text be left centered. Does anyone know the solution??

I apologize if I selected the wrong label for this question as I have no idea if the issue lays in the css, html or liquid file!

2

Hi @SmileyinSK ,
This is Theodore from PageFly - Shopify Page Builder App.

Your Sense theme’s multicolumn title isn’t centering properly for small fonts. Here’s how to fix it:

Cause: Conflicting CSS rule or missing styles for small font sizes.

Steps:

  1. Inspect Element: See which CSS rules apply to the small font size title.
  2. Identify Conflict: Look for rules setting text-align: left for small fonts.
  3. Fix:
    • Override the conflicting rule with a new rule setting text-align: center.
    • Add missing styles to center the small font size title.

Help:

  • Hire a Shopify theme developer for complex fixes.
  • Contact Shopify support for further assistance.

Best regards,
Theodore | PageFly

3

Thank you, but I’ve been trying to do that. I just don’t know where it is. Do I inspect every css file?

4

No just open the page in your browser, (if it’s Chrome) hit View (from the menu) > Developer Tools > Inspect Elements. It will open a dev window that shows you the Source Code, and if you pick the right selector option it will highlight the code when you select something (an element) on the page. So if you select the Heading of your section, it will show you the tags, the class / divs etc, so that you know what you need to target. If you do a google search for ‘Using Chrome Developer Inspector Tool’ i bet there’s a video showing you how to use it, then you’ll get what you need :slightly_smiling_face: [Learning myself as I go]