How do I make the sides and the top smaller similar like CAINTE?

Store Design
, , , ,
1

How do I make the sides and the top smaller similar like CAINTE?

My website: https://onecap.se/

Cainte: https://cainte.com/en-se/pages/men

SkaĢˆrmavbild 2026-02-11 kl. 21.58.27
SkaĢˆrmavbild 2026-02-11 kl. 21.58.27800Ɨ1118 134 KB

1 Like
2

Hello, you should probably change how your theme handles margins on the ā€˜collectionā€™ page template layout.

Currently, they are tied to .container; however, modifying .container impacts the width of the entire site.

That is why an update to the style logic is necessary within the code either at the section level or (more cleanly) within the themeā€™s structure

image
image1635Ɨ1058 242 KB

3

Well, you are looking for a way to adjust the spacing from left, right, top and bottom.

here are the steps you can follow to ensure the same spacing same like the reference site.

Go to Shopify Admin ā€“> Online Store ā€“> Edit Code ā€“> main.css

In the end of main.css paste the following code that shared below.

.container.container--no-max.lightly-spaced-row-above {
   padding-right: 10px !important;
   padding-left: 10px !important;
   padding-top: 20px !important;
}

Results:

image
image1919Ɨ948 137 KB

4

The theme sets 2 CSS variables --container-pad-x which controls white space on the left and on the right and --section-padding which controls white space above section.

I am pretty sure these can be controlled somewhere in theme settings.

However, if you want to control these for some particular section, add code like this to the ā€œCustom CSSā€ of these sections:

{
  --container-pad-x: 16px;
  --section-padding: 16px;
}

this code will only work in section Custom CSS

If you want to apply them to all template sections (not Header/Footer), you can add this code to ā€œTheme settingsā€-> ā€œCustom CSSā€:

main {
  --container-pad-x: 16px;
  --section-padding: 16px;
}

Currently, both set to 50px and horizontal padding is reduced to 16px on mobile.

5

Hey! I donā€™t have anything called ā€œmain.cssā€, I just got theme.liquid and the code does not work unfortunoately

6

Not working, I use theme.liquid

7

Can you show me in the screenshot on how you add the code in theme.liquid file?

8

SkaĢˆrmavbild 2026-02-12 kl. 11.34.30
SkaĢˆrmavbild 2026-02-12 kl. 11.34.301920Ɨ1105 233 KB

9

First of all you are not adding the css that I provide you.

And secondly, you are adding the css without style tag. Simply remove the current css and add the following one, before the body tag.

<style>
.container.container--no-max.lightly-spaced-row-above {
   padding-right: 10px !important;
   padding-left: 10px !important;
   padding-top: 20px !important;
}
</style>
1 Like
10

image
image311Ɨ859 30.2 KB

.collection-slider-row .container.containerā€“no-max {
padding-inline: 10px;
}
add in that particular section

11

Sorry, my bad. It really worked now!! Thank you.

But It did not work on the homepage. Could you please tell me how to fix it there as well?

12

.collection-slider-row .container {
padding-inline: 10px;
}

reason : .containerā€“no-max vs .containerā€“-no-max

13

Please can you respond and help me?

14

Sorry, my bad. It really worked now!! Thank you.

But It did not work on the homepage. Could you please tell me how to fix it there as well?

15

paste this code before the body tag.

<style>
.container.container--no-max {
   padding-right: 10px !important;
   padding-left: 10px !important;
   padding-top: 20px !important;
}
</style>
16

Thanks, but now the top is a bit bigger, please can you fix?

SkaĢˆrmavbild 2026-02-12 kl. 13.08.41
SkaĢˆrmavbild 2026-02-12 kl. 13.08.411920Ɨ225 65.2 KB

17

Thanks, but now the top is a bit bigger, please can you fix?

18

Thanks, but now the top is a bit bigger, please can you fix?

19

Paste this code in the theme.liquid file.

.container.container--no-max.relative {
    padding-top: 0px !important;
}
20

Make sure, you should paste in the style tag.