Yet another reduce-spacing request (Debut Theme)

[Jaspbur756]

Hi y'all.

I've trudged the archives to find a solution to reduce the spacing in some sections on my Store, however the answer has yet proved elusive.

The main thing I am trying to achieve is to reduce the spacing at the bottom and top of the Custom HTML sections, on my store https://crafted-in-time-watches.myshopify.com the first of these sections is the section between the Menu line and the "Current Best Sellers" section.

Thanks in advance.

[Alex_mcl · Accepted solution]

From a design perspective whitespace is a very valuable way of making your site look less crowded and easier to navigate, from a quick look at your site as a designer, I would say the spacing between your sections are correct, much less and it will start looking crowded.

That being said, if you want to reduce the sections, within the code editor under Assets > theme.css find this section:

.index-section {
  padding-top: 35px;
  padding-bottom: 35px; }
  @media only screen and (min-width: 750px) {
    .index-section {
      padding-top: 55px;
      padding-bottom: 55px; } }
  .index-section:first-child {
    padding-top: 0;
    border-top: 0; }
  .index-section:last-child {
    padding-bottom: 0; }

 the two figures you need to change are the padding-top and padding-bottom underneath the lines @media only screen and (min-width: 750px).

Just keep both top and bottom figures the same.

Alex

[Jaspbur756]

Thankyou, this is good advice 😊

Many thanks

[Jaspbur756]

HI Alex,

Thanks for your insights. Is there a way to adjust just one section - the Slider showing the payment Icons - to adjust the space above and below so it will appear much more compact?