Reduce Image Size In Product Page Mobile (Dawn theme)

Store Design
, ,

Topic summary

A user sought to reduce the product image size and title font size on mobile devices for the Dawn 2.0 theme, as no built-in customization options were available in the theme settings.

Solution Found:
The user successfully resolved the issue using custom CSS code provided by ChatGPT. The implementation involves:

  • Navigating to Shopify Admin > Online Store > Themes > Customize
  • Selecting Products > Default product from the dropdown
  • Accessing Theme settings > Custom CSS at the bottom of the left panel
  • Adding CSS targeting .product__media-wrapper and .product__title classes

The CSS code uses media queries (max-width: 600px and 768px) to:

  • Reduce product image width to 60-80% on mobile
  • Decrease title font size to 1.7-2rem
  • Maintain bold font weight for readability

Current Status:
The user reported the solution is working, though noted the title changes weren’t applying as expected initially. They requested feedback from experienced coders to verify the approach.

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

Hello, on mobile the product page image is too big, and the title is quite large. There seems to be no option to edit it in theme customisation. Could someone point show me how to edit the product image size and reduce the title size as well.

KB24_0-1727735334698.png
KB24_0-1727735334698.png523×953 96.5 KB

Or if it’s easier to reduce the whole card together? It would be best if only mobile is reduced but if both desktop and mobile have to be reduced together then that’s fine.

Thank you!

EDIT: This is the solution ChatGPT gives and it seems to be working, if there is a problem with it, someone with coding experience let me know :slightly_smiling_face: It reduces the image size, but the title isn’t changing so i’m trying to figure that out

  • Go to your Shopify Admin > Online Store > Themes.
  • Click Customize next to your Dawn 2.0 theme.
  • From the dropdown at the top of the page, select Products > Default product to preview the product page.
  • On the left-hand panel, click Theme settings, then scroll to the bottom to find Custom CSS, and add code

@media only screen and (max-width: 600px) {
/* Reduce the product image size */
.product__media-wrapper {
max-width: 80% !important;
margin: 0 auto !important;
}

/* Reduce the product title size */
.product__title {
font-size: 20px !important;
line-height: 1.2 !important;
}
}

2

ChatGPT has solved it, nice and easy to do.

  • Go to your Shopify Admin > Online Store > Themes.
  • Click Customize next to your Dawn 2.0 theme.
  • From the dropdown at the top of the page, select Products > Default product to preview the product page.
  • On the left-hand panel, click Theme settings, then scroll to the bottom to find Custom CSS, and add code

@media only screen and (max-width: 600px) {
/* Reduce the product image size */
.product__media-wrapper {
max-width: 60% !important;
margin: 0 auto !important;
}

/* Reduce the product title size /
/ Targeting the product title /
.product__title h1,
.product__title h2 {
font-size: 2rem; / Increased size /
font-weight: bold; / Making the text bold */
}

/* Optionally, to make the title responsive based on screen width /
@media (max-width: 768px) {
.product__title h1,
.product__title h2 {
font-size: 1.7rem; / Slightly smaller for mobile screens /
font-weight: bold; / Ensuring bold remains on smaller screens */
}
}