Add padding to headers and filters in collection page on mobile

[letsgetwasted]

Hi,

Somehow there isn't any padding for my collection pages for the headers and filters - I'd like padding on left and right, could somebody advice what to modify? Attached link is for one product page but this change should apply to all collection pages, thank you!

https://www.wastd.world/collections/serving-platter

 

[Tech_Coding]

Hello @letsgetwasted 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px){
    .collection-hero__title {
        padding: 0 1.5rem !important;
     }
     .facets-container.scroll-trigger.animate--fade-in {
        padding: 0 1.5rem !important;
     }
}
</style>

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[BSSCommerce-B2B · Accepted solution]

@letsgetwasted ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </head> on theme.liquid

<style>
  .collection-hero__title, .facets-container {
      padding: 0 14px !important;
  }
</style>

Result:

Hope it helps 😊

[letsgetwasted]

Worked perfectly, thank you 🙂

[BSSCommerce-B2B]

Dear my friend, 

😍 It's such my honor to help you, bro.

Can you give us some Likes, it will be the greatest motivation for us.

Thanks in advance! 

[Sangeetanahar]

hello @letsgetwasted 

o to online store ----> themes ----> actions ----> edit code ---->assets ---->component-collection-hero.css...> add the code end of the file

 @media screen and (min-width: 750px) { 
.collection-hero__title {
    margin: 2.5rem 2rem;
}

.facets-container.scroll-trigger.animate--fade-in {
    margin: 15px;
}

thanks