Reduce Image Size In Product Page Mobile (Dawn theme)

[KB24]

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.

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 🙂 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;
}
}

[KB24 · Accepted solution]

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 */
}
}