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!

[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

[ZestardTech]

Hello There,

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

[Artzen_tech]

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

[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 there, here is the following details you have asked for

https://misaligned.jp/

Store password: misalignedsucks

Thank you in advanced!

Misa.

[MISAMISA]

Hey there Zestard, I like your username haha

Store is as follows;

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 tag

RESULT:

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

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!

[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]

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 tag

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;
}

[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;
}

[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.