Adjusting Product Alignment on Collection Page

Store Design
, ,
1

Hey everyone,

I’m looking for some guidance on fixing a layout issue on my store, rappid.run. Specifically, I’d like to shift the products on my collection page slightly to the right. Right now, they’re positioned closer to the left side of the page than the right, and I’d love to balance the spacing for a cleaner look.

Does anyone know how I can fix this, either through CSS or another method? Any tips or resources would be super helpful. Thanks in advance!

Best,

Kim

IMG_F3069C218D08-1.jpeg
IMG_F3069C218D08-1.jpeg1179×2556 140 KB

1 Like
2

Hi @rappid

Which one you like to align right? The image or the titles n price?

Like this.

Made4uoRibe_0-1737061172443.png
Made4uoRibe_0-1737061172443.png435×754 95.4 KB

If it is try this.

  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:
@media only screen and (max-width: 989px){
.collection .card__heading a, .collection .price {
    text-align: center;
}

}
  • And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @rappid ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.

@media (min-width: 769px){
.collection .card-information,
.collection .card-wrapper .card__information{
  text-align: center !important;
}
}
4

Hi @rappid

After checking the code, I found that your page isn’t actually misaligned to the left. It’s likely because the title and price are left-aligned, giving you that impression. You can follow the guide below to center the text:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (max-width: 768px){
.card__information * {
    text-align: center !important;
}
}

image (4).png
image (4).png363×595 50.5 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.