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.
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!
