Centering Product Page media & Text - Dawn Theme

Store Design
, ,

Topic summary

A store owner using the Dawn theme wants to center all product page elements—including media, text, variant thumbnails, and other components—for both mobile and desktop, with mobile as the priority.

Current Issue:

  • Product media displays left-aligned
  • All text alignment is left-aligned
  • On mobile, the edge of the next image is partially visible and should be hidden until the customer swipes

Motivation:

  • The centered layout would match the aesthetic and synergy of the entire store, where everything except the product page currently uses a centered layout

Proposed Solution:
A community member provided CSS code to add to the base.css file, targeting mobile devices (max-width: 767px) to adjust text alignment and margins for product info containers, descriptions, and quantity inputs. The solution appears incomplete or corrupted in the thread.

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

Hi guys,

I’m looking to have my product media and information centred.

As you can currently see the media is to the left and all text alignment is to the left, I would love for it to be centred and all the text, variant thumbnails & everything else centred.

I would like this for both mobile and desktop, but mobile is my priority

Additionally you’ll notice you can see part of the edge of the next image on mobile, I was hoping it would be hidden and only appear when the customer swipes.

The reason for all this is basically just synergy & aesthetic of my entire store, everything except the product page uses a centred layout.

shopify forum help.JPG
shopify forum help.JPG375×1238 41.7 KB

For reference if need be: https://sleepingbooty.com.au/products/copy-of-luxe-satin-personalised-robe-short-sleeve-white?option1=S%2FM%20(6-12

2

@sleepingbooty Please add below line of CSS code at the end of your base.css file.

@media(max-width:767px){
body .product__info-container {
    text-align: center;
}

.has_dpo_options quantity-input {
    margin: 0 auto;
}

body .product__description.rte {
    text-align: left;
}
}