Centering Products and Footer

[PabloPier]

Hello,
I am facing the following issue. I want to center my product pictures and also my footer texts. As you can see the product pictures and the footer menus and texts are slightly to the left:

[niraj_patel]

Hello @PabloPier 
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[PabloPier]

Yes, here it is https://www.pablopier.com/

[niraj_patel]

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>
ul#Slider-template--22729342484803__featured_collection {
justify-content: center !important;
}
.footer__blocks-wrapper.grid.grid--1-col.grid--2-col.grid--4-col-tablet.scroll-trigger.animate--slide-in {
text-align: center !important;
}
.collection__title.title-wrapper {
text-align: center !important;
}
</style>

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

[PabloPier]

All good just one thing. The footer texts inside the menus are not centered as they were before:

[comercioservice]

@PabloPier 
use this css

@media screen and (min-width: 750px) {
    .footer-block__details-content>li:not(:last-child) {
        margin-right: 0;
    }
}

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[PabloPier]

Still the same.

[comercioservice]

@PabloPier 
you want like this ? 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[comercioservice]

@PabloPier 
use this end of base.css file

@media screen and (min-width: 750px) {
    .footer-block__details-content>li:not(:last-child) {
        margin-right: 0 !important;
    }
}

try to add important also add CSS code in the end of CSS file  

[PabloPier]

The texts like "About us", "Contact us" etc. are not centered anymore like they used to be.

[niraj_patel · Accepted solution]

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>
.footer-block__details-content>li:not(:last-child) {
margin-right: unset !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[comercioservice]

@PabloPier 

hope you are well

Please go to

1) Online store

2) Themes -> Edit theme

3) asstes

4) base.css and  paste this code on the end

.card__heading {
    text-align: center;
}
.footer-block {
    text-align: center;
}
@media screen and (min-width: 750px) {
    .footer-block__details-content>li:not(:last-child) {
        margin-right: 0;
    }
}

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[comercioservice]

@PabloPier 
result

[comercioservice]

@PabloPier  for product images use 

.collection  slider-component ul {justify-content: center;}

result is: 

I hope it works for you, let me know, and If you'd like to discuss this more, don't hesitate to send me a PM

[Made4uo-Ribe]

Hi @PabloPier 

I check your store, the product already align into center. But on the product your lacking 1 product it must be 4 product so it level. So it showed look like in the left. 

If you dont have plan to add you can check this code. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.contains-card--product {
    justify-content: center;
}

• And save. For your footer text. 

.footer-block.grid__item.scroll-trigger {
    text-align: center;
}

• And Save. 
• Result:
• 

[PabloPier]

It worked but the texts inside the footer menus got re-centered:

[Made4uo-Ribe]

Oh i centered it, as you requested.