How to position the product page paginations slider onto the product image Dawn theme.

Topic summary

Repositioning the product-page pagination slider onto the product image in Shopify’s Dawn theme. A CSS snippet added to base.css for mobile view positioned the slider over the image; the result was confirmed.

Spacing under the product image was tightened with additional CSS (reduced padding-bottom and margin-bottom), which also worked as intended.

Further requests covered removing a left-side white gap on desktop and adding a “READ MORE” truncation for product descriptions. The helper addressed only the layout: CSS to set the main product section to full width and remove left padding; noted that the “READ MORE” feature requires a developer to add Liquid (Shopify’s templating language).

Troubleshooting included specifying the correct file (base.css), adding !important if needed, and fixing a missing closing bracket that broke CSS. After correction, desktop appeared as intended.

A regression occurred on mobile: titles and description shifted left. The user clarified they want the image shifted left for desktop only without affecting mobile.

Status: partially resolved. Desktop layout fixed; mobile misalignment remains, and a desktop-only CSS solution plus the “READ MORE” implementation are still open. Screenshots support the visual changes.

Summarized with AI on December 24. AI used: gpt-5.

Sorry, I can only help you with the prouct width. But adding the “read more” that need a developer to add some liquid code in your store.

same instruction.

section#MainProduct-template--16107583570159__main {
    max-width: 100%;
    padding-left: 0px;
}

And Save.

Result;

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!