Dawn Theme - Center Product Price, Variant-Section on mobile devices

Store Design
, ,

Topic summary

A user seeks to center the product price and variant section on mobile devices in the Dawn theme, having already successfully centered the product title using CSS media queries.

Current Issue:

  • Product title is centered via custom CSS targeting screens under 749px
  • Price and variant section remain left-aligned on mobile
  • A screenshot was shared showing the desired layout

Proposed Solutions:
Two community members provided similar CSS approaches:

  • Add media query targeting .product-info-wrapper.grid__item with text-align: center
  • One solution uses max-width: 749px, another uses 767px
  • One includes !important flag for specificity
  • Both involve editing the base.css file in the theme’s Assets folder

The discussion remains open with no confirmation of which solution worked.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

i am looking for a soltuion to center the items product.price and and the variant section. I already centered the product.title with:

@media screen and (max-width: 749px) {
.product__title h1 {
    text-align: center;
}

Unfortunately, I have no idea how to change the price and the variant section as shown in the image.

Screenshot 2023-08-05 094824.png
Screenshot 2023-08-05 094824.png468×576 24 KB

www.taskslider.de
PW: nonsense

2

Hello @Roxolot ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

@media screen and (max-width: 749px) {
.product__info-wrapper.grid__item {
    text-align: center;
}
}

Thanks

1 Like
3

Hi @Roxolot

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (max-width: 767px){
.product__info-wrapper.grid__item {
    text-align: center !important;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly