Hi, I’m using the DAWN theme and I’m having an issue with the homepage design. I’ve added multiple sections to the homepage, including ‘Image with Text’ and ‘Featured Products’. Currently, the left and right side padding in these sections is unequal, as shown in the attached screenshot. How can I fix this?
Topic summary
Issue: Unequal left/right padding on DAWN theme homepage sections (“Image with Text” and “Featured Products”); a screenshot was provided to illustrate the misalignment.
Key actions/requests:
- Multiple responders asked for the store URL (and password if protected) to inspect. The merchant later shared: berastores.com.
Proposed fixes:
- Suggestion 1: Add a CSS rule targeting elements with IDs starting “Slider-template” to horizontally shift content (translateX by -60px) via component-slider.css. Intended to rebalance padding (screenshot of expected result shared). The merchant reported it did not work.
- Suggestion 2: Place the same CSS rule in theme.liquid before the closing tag, in case the stylesheet change didn’t apply.
Notes:
- The CSS targets slider elements; it applies a horizontal translate to adjust visual alignment. Impact on non-slider sections (e.g., Image with Text) is unclear from the thread.
Status: No confirmed fix yet; awaiting the merchant’s follow-up after applying the CSS in theme.liquid. The thread remains open.
Hi @Yasir6
Kindly share the store URL
Hey @Yasir6
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Hi @Yasir6
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file component-slider.css and add this code snippet to the end of the file
[id^='Slider-template'] {
transform: translateX(-60px) !important;
}
Result
If it’s helpful, please like and mark it as a solution, thank you 
Sorry but it’s doesn’t work.
My Website is currently berastores.com
Access theme.liquid and add the CSS before the tag
[id^='Slider-template'] {
transform: translateX(-60px) !important;
}