Product Title On Product Page Centering - For Impact Theme

Store Design
, ,

Topic summary

Goal: center specific elements on the product page (Impact theme) on mobile only.

What was tried and suggested:

  • Product title: multiple CSS options provided, added to theme.css or theme.liquid. Examples included targeting .product-info__title or .product-info__title.h1, and using mobile media queries (e.g., max-width: 767px or 999px) to apply text-align: center.
  • Price + tax/shipping text: initial CSS centered the tax/shipping notice but not the price; a corrected CSS snippet later centered both successfully.
  • Vendor name: the attempt using product.vendor didn’t work; a helper supplied CSS that did center it.

Current status and issues:

  • Intermittent issue remains where the price sometimes shifts left on mobile. An additional CSS fix was provided to “solidify” centering, but final outcome not confirmed. The discussion appears ongoing.

Side topic (separate theme):

  • A Dawn theme question about an oversized LinkedIn footer icon: helper noted icons are actually same size but offered CSS to visually reduce LinkedIn. This is unrelated to the Impact theme topic.

Notes:

  • Screenshots were shared, and code snippets are central to the solutions (CSS selectors and media queries).
Summarized with AI on January 5. AI used: gpt-5.
7

( The Pricing AND the Tax + Shipping calculation text)