Center Related Products - Product Page

[ellacoker]

Hello!

I have just realised that my "related products" at the bottom of my product page are not centered. Please see screenshot for reference. Is someone able to please give me the code for this? I want the "you may also like" text to come in line with the images please.

For the mobile version of this same section, I would like less padding to the left and right, and the titles of each product to be centered on the image. 

Thank you very much! Ella

URL: https://www.livwithin.com.au/products/soft-weave-mat-sun

[Guleria]

Hello @ellacoker ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your Assets > base.css file and paste the following code at the bottom:

h2.related-products__heading.inline-richtext.h2 {
    text-align: center;
}
@media screen and (max-width: 767px) {
product-recommendations.related-products.page-width {
    padding: 0 0px !important;
}
}

Regards
Naveen

[tapan_sain]

Hello @ellacoker 

Please add the code below to your CSS file(base.css). 

// to add space at the top of the section
.related-products{
    margin-top: 50px;
}

// to center the heading
.related-products .related-products__heading{
   text-align: center;
}

// to center the product grid
.related-products .grid.product-grid{
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
}

Now you will add this code after the recommendation section will look like this(Attached screenshot). 

[Made4uo-Ribe]

Hi @ellacoker 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

h2.related-products__heading.inline-richtext.h2 {
    text-align: center !important;
}
@media only screen and (max-width: 749px){
product-recommendations.related-products.page-width {
    padding: 0 20px !important;
}
}

• And Save.
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ellacoker]

Hello, The mobile worked! however, there is still too much padding to the right on desktop. Can I add something to that code to fix this?

Thanks!

Ella.

URL: https://www.livwithin.com.au/products/soft-weave-mat-sand

[WebDeskSolution]

Hello @ellacoker 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css
• Insert the provided CSS code at the end of the file and save the changes.

.related-products .related-products__heading
{
    padding: 0 10px;
}
@media screen and (max-width: 479px)
{
product-recommendations.related-products.page-width
{
    padding: 0 15px !important;
}
product-recommendations.related-products .card .card__heading .full-unstyled-link
{
    text-align: center;
}
}

Please hit Like and Mark it as a Solution if you find our reply helpful.