How to edit margins how custom HTML section on Prestige theme

Store Design
1

Hello fellas!

I created a custom html section that is used as a title to my a specific section, yet the top and bottom margins are too high so my title is too far from its section.

Could you help me figure out how to fix that? Thank you so much!

site : https://better-than-cream.myshopify.com/

code : iamats

Capture d’écran 2022-08-17 à 10.32.43.png
Capture d’écran 2022-08-17 à 10.32.43.png1696×1192 161 KB

2

@missclick go to assets > theme.css

and find this code

.shopify-section--bordered>.Section--spacingNormal

and change the value of padding to what you want.

Right now, I have set it to 20 px here.

imatikshaikh_0-1660725984132.png
imatikshaikh_0-1660725984132.png1683×585 96.2 KB

If you need help doing it, contact me here and I’ll do it for you. No cost of course.

Best Regards,

Atik

3

Hey @imatikshaikh thank you for the quick reply!

Is this the code you are talking about? I have set it to 20px but nothing seems to move.

Capture d’écran 2022-08-17 à 10.54.22.png
Capture d’écran 2022-08-17 à 10.54.22.png1026×552 55.9 KB

4

@missclick yes that’s the correct one. Did you click on save?

And it takes a few seconds for changes to reflect on the website sometimes.

If you still can’t do it, contact me. I’ll help you.

5

Thanks, contacted you by email.

6

Hi, @missclick

You can try this code

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> theme.css ->paste the below code at the bottom of the file.
@media screen and (min-width: 900px){
.shopify-section--bordered>.Section--spacingNormal {
    padding: 20px 0;
}}
7

@missclick I’ve replied to your mail. Kindly revert back.

8

Hey @Ahsan_ANC thank you for your help, it seemed to work with some adjustments but it also moves the margins of title that’s above. Is there a way to edit only the margin of this particular section ? Thanks.

9

here is the updated code, it will not effect to header

@media screen and (min-width: 900px){
#main .shopify-section--bordered>.Section--spacingNormal {
    padding: 20px 0;
}}
10

Hey @Ahsan_ANC thank you, it seems to work better!

Yet I can see a huge difference on mobile view. When I am adding a little bit of padding on desktop view, it seems a lot with mobile view. Is there a way not to affect the mobile view ?

11

this code will work on mobile only.

also, you are missing an ending curly brace, in the code that you added earlier.

@media screen and (max-width: 899px){
#main .shopify-section--bordered>.Section--spacingNormal {
    padding: 10px 0;
}}
12

Thank you so much for you time and your help @Ahsan_ANC , it seems to work perfectly now!