Unable to add padding on left and right to featured products.

Shopify Discussion

Topic summary

A user encountered an issue with the Dawn theme where featured product sections appeared too close to screen edges at 1200px width. They needed to add horizontal padding but couldn’t find the solution.

Resolution:

  • Another user provided CSS code to be inserted in theme.liquid before the </body> tag
  • The code targets featured collection sections and adds left/right padding using media queries for screens 768px and wider
  • The solution successfully resolved the initial problem

Follow-up guidance:

  • To adjust padding values, modify the 3rem values in the CSS code
  • For additional featured product sections, the user was advised to duplicate the existing section through the theme customizer (three dots menu)
  • When duplication didn’t work, the user adapted the CSS to target all featured collection sections using section[id*="featured_collection"]

The discussion concluded with the issue fully resolved and the user understanding how to customize the padding values for future adjustments.

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

in this featured products section, the left and right sides are very close to screen edges and i want to increase the padding on both ends, i am currently using dawn theme and screen width=1200px. PLS HELP.

Screenshot 2025-06-14 141838.png
Screenshot 2025-06-14 141838.png2533×906 87.2 KB

1 Like
2

hey @HK3105 share the URLs of your website plz

1 Like
3

My Store

1 Like
4

hey @HK3105 their is a pw in your website if you feel free then plz share so i can help you

1 Like
5

I’ve removed it for now. go on, review it for me pls.

1 Like
6

Mustafa_Ali_0-1749893335705.png
Mustafa_Ali_0-1749893335705.png1267×524 27.4 KB

hey @HK3105 dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

1 Like
7

hey @HK3105 thank you for your response if you need more help feel free to share it
and also don’t forget to like plz :blush:

1 Like
8

Thank you so much mustafa it worked,I wasted loads of time, tried everything.

But can you also explain the code to me if i want to tweak it a bit in the future, just tell me if i want to increase or decrease the padding a lil bit which part of the code i should edit?

9

So if you want to increase or decrease the padding a lil bit you should edited this code

Mustafa_Ali_0-1749894058870.png

just removed this numbers and add your number that you want to given hope you understand

1 Like
10

THANK YOU SO MUCH!!!

11

hey, i have one more doubt what if i want to add another featured product collection, i did that and the new one came with its original settings.

what should i do to make it the same as the first one?

12

for that don’t add a new feature product
just duplicate your first feature product section

so go to online store and open the customization and then open the first feature product section and then you can see in your right side top of the corner side there is a three dots open it and duplicate the section and then your problem is solved

Mustafa_Ali_0-1749897633789.png

Mustafa_Ali_2-1749897659971.png

13

I Tried duplicating but it didnt work. ok thanks got the solution

@media screen and (min-width: 768px) { section[id*="featured_collection"] { padding-left: 3rem; padding-right: 3rem !important; } }
1 Like