Solved

How can I decrease the margin on all sides of my pages?

ChromaC
New Member
7 0 0

Hello, 

 

Is there a way to reduce the margin all around all the pages on my shopify pages? I would like to have less 'space' at the top, buttom, right and the left and make the entire page wider (I've set it to full page with in the theme settings). I'm using IMPACT theme. Is this possible? 

 

Kind regards,

 

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2093 599 468

This is an accepted solution.

Yeah sure, just replace the code with this one

 

<style>
@media only screen and (min-width: 990px) {
   .header__wrapper {
       padding: 0 10px !important;
   }

   .section--tight {
       padding: 20px 10px !important;
   }

   scroll-carousel#scroll-area-template--20970232578378__related-products {
       padding: 10px !important;
   }

   .container {
       max-width: 100% !important;
       margin: 0 10px !important;
   }

   .section.section-blends.section-full {
       padding-bottom: 10px !important;
   }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 13 (13)

ThePrimeWeb
Shopify Partner
2093 599 468

Hey @ChromaC,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChromaC
New Member
7 0 0
ThePrimeWeb
Shopify Partner
2093 599 468

Hey @ChromaC,

 

Check if this works out for you. 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.header__wrapper {
    padding: 0 10px;
}

.section--tight {
    padding: 20px 10px;
}
scroll-carousel#scroll-area-template--20970232578378__related-products {
    padding: 10px;
}

.container {
    max-width: 100%;
    margin: 0 10px;
}

.section.section-blends.section-full {
    padding-bottom: 10px;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710508083487.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChromaC
New Member
7 0 0

Hello,

 

Thank you. It seems like it helps, but only at the buttom part of the page. The footer section and the 'you may also like' did change, but not the menu or the rest of the page? 

ThePrimeWeb
Shopify Partner
2093 599 468

It was some priority issues on your site, try this code instead, same instructions

 

<style>
.header__wrapper {
    padding: 0 10px !important;
}

.section--tight {
    padding: 20px 10px !important;
}
scroll-carousel#scroll-area-template--20970232578378__related-products {
    padding: 10px !important;
}

.container {
    max-width: 100% !important;
    margin: 0 10px !important;
}

.section.section-blends.section-full {
    padding-bottom: 10px !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChromaC
New Member
7 0 0

Thank you, this seemed to work much better. Is there a way to ensure that it only affect desktop and not mobile? Now the header/top is too narrow on the mobile screen. 

ThePrimeWeb
Shopify Partner
2093 599 468

This is an accepted solution.

Yeah sure, just replace the code with this one

 

<style>
@media only screen and (min-width: 990px) {
   .header__wrapper {
       padding: 0 10px !important;
   }

   .section--tight {
       padding: 20px 10px !important;
   }

   scroll-carousel#scroll-area-template--20970232578378__related-products {
       padding: 10px !important;
   }

   .container {
       max-width: 100% !important;
       margin: 0 10px !important;
   }

   .section.section-blends.section-full {
       padding-bottom: 10px !important;
   }
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ChromaC
New Member
7 0 0

Thank you very much! Have a great day! 🙂 

ChromaC
New Member
7 0 0

Hello again,

 

On the collection pages, the product titles (below the product images) are written in bold. Is there a way to change this so that it is just written in 'normal' like the prices? Thanks! 

ThePrimeWeb
Shopify Partner
2093 599 468

Yeah, paste this code along with the others

<style>
span.product-card__title a {
    font-weight: normal !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
Logototheleft
Tourist
20 0 0

Hi, can you help with the same issue on the Focal theme mobile view?

techlyser_web
Shopify Partner
1491 275 295

Hello @ChromaC 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
ChromaC
New Member
7 0 0