FROM CACHE - en_header

Yet another reduce-spacing request (Debut Theme)

Solved
Jaspbur756
Tourist
14 0 2

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.

Accepted Solution (1)

Accepted Solutions
Alex_mcl
Shopify Partner
25 5 10

This is an 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

www.mcleancreative.co.uk

View solution in original post

Replies 3 (3)
Alex_mcl
Shopify Partner
25 5 10

This is an 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

www.mcleancreative.co.uk
Jaspbur756
Tourist
14 0 2

Thankyou, this is good advice 😊

Many thanks

Jaspbur756
Tourist
14 0 2

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?