Adding padding to the featured collection section on the home page

[MISAMISA]

Hey everyone!

I've been having some difficulty setting up the design of my website the way i want it, I am trying to add some padding to the featured collection to but can't seem to figure what sort of code to insert. I have attached a detailed description of the type of outcome we want to achieve

Thank you Shopify Community!

[Artzen_tech · Accepted solution]

Hi @MISAMISA 
Its Artzen Technologies! We will be happy to help you today.

To compress this section, you can add a CSS to this section.

The CSS can be:-

.collection-grid__row--grid {
    width: 90%;
    margin: 0 auto;
}

Adding padding to make this area compressed, might not be a good way to do as it might get little complicated.
 
And if then also it doesn't get fixed then please share the store frontend url and password if its required, then it will be easier to assist you.

Let me know if need further assistance
Regards,
Artzen Technologies

[oscprofessional]

Hello @MISAMISA  Can you please share your store URL I will check and provide a proper solution

if your store is password protected please share it with the password

thanks

[MISAMISA]

Hi there, here is the following details you have asked for

https://misaligned.jp/

Store password: misalignedsucks

Thank you in advanced!

Misa.

[Moeed]

Hey @MISAMISA 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
section#collection-module-template--16089923125398__2098a6b0-cd27-47b7-bfd6-d991956d8c16 {
    width: 85% !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[ZestardTech]

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

[MISAMISA]

Hey there Zestard, I like your username haha

Store is as follows;

https://misaligned.jp/

Store password: misalignedsucks

Thank you in advanced!

Misa.

[Artzen_tech · Accepted solution]

Hi @MISAMISA 
Its Artzen Technologies! We will be happy to help you today.

To compress this section, you can add a CSS to this section.

The CSS can be:-

.collection-grid__row--grid {
    width: 90%;
    margin: 0 auto;
}

Adding padding to make this area compressed, might not be a good way to do as it might get little complicated.
 
And if then also it doesn't get fixed then please share the store frontend url and password if its required, then it will be easier to assist you.

Let me know if need further assistance
Regards,
Artzen Technologies

[MISAMISA]

Hi it worked! however i need the text of the items scaled with it as well, is it possible to have CSS solution for this?

[Moeed · Accepted solution]

Hey @MISAMISA 

To scale the text of the items with it's images,

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.product-block__image-container {
    justify-content: start !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Artzen_tech]

Hello @Moeed @MISAMISA 

Css !important property doesn't use general purpose. It's not a good practice. If you are using !important property it can cause more problems for your store.

And everytime important CSS does not work, sometimes it may effect other CSS on the whole website.

And every CSS should not be written in theme.liquid file. For CSS we have CSS files.

[Artzen_tech]

@MISAMISA 

Add the below CSS to make the title to center.

.product-block__info {
  justify-content: center;
    align-items: center;
}

[Artzen_tech]

@MISAMISA 

Add the following CSS to make the div aligned.

I can see you struggle with the alignment of the div so I have provided you with all the CSS to make the div in proper position.

.product-block__image-container {
     justify-content: center !important;
}
h3 .product-block__title {
      text-align: center;
}
.product-block__info--left .product-block__top {
    justify-content: center!important;
}

I used !important to override the theme's CSS, please add all the CSS to your CSS file.
Below is the Screenshot for the same solution.

[Moeed]

Hey @MISAMISA 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[MISAMISA]

Hi Moeed, Thank you for lending a helping hand details of store is as follows,

https://misaligned.jp/

Store password: misalignedsucks

Have a great day!

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find theme > theme.css and paste this at the bottom of the file:

.collection-grid__row--grid {
width: 100%!important;
margin: 0 auto!important;
}