Product thumbnail size product page dawn theme

Store Design
,

Topic summary

A user seeks to enlarge product thumbnails on their Shopify Dawn theme product pages to fill the entire mobile screen.

Solution Provided:
Another user shares CSS code to be added to the base.css file, targeting mobile screens (max-width: 749px) to make thumbnails 100% width and remove left margins.

Follow-up Issues:

  • Padding remains between pagination arrows and images/product title
  • Pagination counter displays incorrect numbers (showing 1/3 for 2 photos, 1/6 for 5 photos)
  • The CSS fix only applies to the main product page template, not to a separate custom product page template

Status: The discussion remains open with unresolved pagination and template-specific styling issues. The original poster is seeking additional guidance to apply the fix across all product page templates and correct the pagination count.

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

Hello wizards,

Im trying to enlarge the product thumbnail on the product pages to fill the entire screen (red boxes).
Cant figure out how. www.sundaymass.store

please see attached

Screenshot 2025-04-12 at 12.31.37 am.png
Screenshot 2025-04-12 at 12.31.37 am.png1020×1532 163 KB

1 Like
2

Hi @massmonster .

Here’s how to achieve that:

  1. Go to “Online Store”
  2. Three dots → Edit Code
  3. Find the base.css file
  4. Add the following code at the bottom of the file
  5. Save and refresh the target store page
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: 100% !important;
        margin-left: 0px !important;
    }
}

If done correctly, the result should be like this:

Screenshot_3.png
Screenshot_3.png428×685 210 KB

I hope this helps!

If you don’t want to edit the theme code directly, you can use a code injection app like the one in my signature.

1 Like
3

thank you mate, thats fixed that issue and the product page is almost perfect,

only issue is theres still a bit of padding between the pagination arrows and the bottom of the image…
theres also padding between the pagniation arrows and the product title

please advise

4

There’s padding above and below the pagination arrows, indeed. Could you describe what you want to do with it? You can’t remove it completely as it will be difficult to notice/click the arrows.

5

Ive managed to move the pagination so that its ontop of the thumbnails. the spacing is good.

however, there is now a new issue… for a product with 2 photos the pagination will show 1/3.. for a product with 5 photos paginaiton shows 1/6…

very strange. any ideas?

6

hey me again

turns out this only worked on the main product page, ive got a seperate product page template for my other items, how do i update that aswell?

https://sundaymass.store/products/deus-vult-lever-belt