Centering Products and Footer

Solved

Centering Products and Footer

PabloPier
Excursionist
25 0 4

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:

PabloPier_0-1719517589538.png

 

Accepted Solution (1)
techlyser_web
Shopify Partner
1833 340 366

This is an 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.

Techlyser || 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

View solution in original post

Replies 16 (16)

techlyser_web
Shopify Partner
1833 340 366

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.

Techlyser || 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
PabloPier
Excursionist
25 0 4

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

techlyser_web
Shopify Partner
1833 340 366

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>

techlyser_web_0-1719518914478.png

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

Techlyser || 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
PabloPier
Excursionist
25 0 4

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

PabloPier_0-1719519584599.png

 

round
Shopify Partner
113 18 10

@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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
PabloPier
Excursionist
25 0 4

Still the same.

round
Shopify Partner
113 18 10

@PabloPier 
you want like this ? 

round_0-1719520012216.png

 

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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
round
Shopify Partner
113 18 10

@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  

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

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

techlyser_web
Shopify Partner
1833 340 366

This is an 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.

Techlyser || 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

round
Shopify Partner
113 18 10

@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
Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
round
Shopify Partner
113 18 10

@PabloPier 
result

round_0-1719518428672.png

 

Was my reply helpful? Click Like to let me know! Was your question answered? Mark it as an Accepted Solution.
round
Shopify Partner
113 18 10

@PabloPier  for product images use 

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

result is: 

round_0-1719519120207.png

 

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

 

 

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

Made4uo-Ribe
Shopify Partner
6961 1656 2043

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:
  • Made4uoRibe_0-1719519138728.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
PabloPier
Excursionist
25 0 4

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

PabloPier_0-1719520100986.png

 

Made4uo-Ribe
Shopify Partner
6961 1656 2043

Oh i centered it, as you requested. 

Made4uoRibe_0-1719521124729.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.