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

ChromaC · ‎03-14-2024

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,

ThePrimeWeb · ‎03-19-2024

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

ThePrimeWeb · ‎03-14-2024

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 · ‎03-15-2024

www.chromaworld.online

ThePrimeWeb · ‎03-15-2024

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.

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 · ‎03-19-2024

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 · ‎03-19-2024

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 · ‎03-19-2024

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 · ‎03-19-2024

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 · ‎03-19-2024

Thank you very much! Have a great day! 🙂

ChromaC · ‎03-19-2024

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 · ‎03-19-2024

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 · ‎04-02-2024

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

niraj_patel · ‎03-14-2024

Hello @ChromaC
Can you share store URL?

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 · ‎03-19-2024

www.chromaworld.online

Zegcom · ‎07-23-2024

Is it possible to reduce the left and right margins of just a single page instead?

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