Align text and title

[Disci]

Hi! I want on the collection page ‘t=shirts’ the title and price to be the same as on the landing page on phone view. So title left and price right. Because it is a bit messed up now…:

https://discinetherlands.com/collections/t-shirts

please let me know if you can fix this!

[BSS-TekLabs]

• Here is the solution for you @Disci
• Please follow these steps:

1. Go to Online Store → Theme → Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before and press ‘Save’ to save it

• This is the result you will get:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Made4uo-Ribe]

Hi @Disci

Try this one, it not only for mobile screen but also the tablet screen.

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 (min-width: 769px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100%;
    }
}

.v-stack.justify-items-center.gap-2 {
    width: 100%;
}

@media (max-width: 768px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-between !important;
        gap: 1rem !important;
        width: 100%;
    }
}

• And Save.

• Result:

• 

• 

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

[Disci]

Yes nice! but can you make sure the title and price go a bit more to the inside. So not completely on the left and right, but leave some space.

[BSS-TekLabs]

Do you want like this?

[BSS-TekLabs]

you can try this code @Disci

[Made4uo-Ribe]

Yeps, sure. Use this code inastead. Same Instruction.

@media (min-width: 769px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-around !important;
        gap: 1rem !important;
        width: 100%;
    }
}

.v-stack.justify-items-center.gap-2 {
    width: 100%;
}

@media (max-width: 768px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-around !important;
        gap: 1rem !important;
        width: 100%;
    }
}

And Save.

Result:

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

[BSS-TekLabs]

If you want like this. you can using this code @Disci

[Disci]

yes but less vertical space between the picture and text

[BSS-TekLabs]

[Made4uo-Ribe]

To less vertical I already add some code. Same Instruction.

@media (min-width: 769px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-around !important;
        gap: 1rem !important;
        width: 100%;
    }
}

.v-stack.justify-items-center.gap-2 {
    width: 100%;
}

@media (max-width: 768px) {
    .product-card__info .v-stack.justify-items-center.gap-1 {
        justify-content: space-around !important;
        gap: 1rem !important;
        width: 100%;
    }
}

.product-card {
    gap: .50rem !important;
}

And Save.

Result:

Let me know if you need more changes. Thanks!

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

[BSS-TekLabs]

@Disci

[BSS-TekLabs]

Can you try this code @Disci

[mt686]

You can align the title and price on your collection page in mobile view using CSS. Here’s how to fix it:

---

Steps to Align Text and Price1. Log in to Shopify Admin:

• Navigate to Online Store > Themes > Edit Code.

1. Locate the CSS File:

   • Open the theme.css or style.css file in the Assets folder.

2. Add Custom CSS: Add this code at the bottom of the file:

.v-stack.justify-items-center.gap-2{
  width: 100%;
}
.v-stack.justify-items-center.gap-1{
  width: 100%;
}

• Save and Test:

  • Save your changes and refresh the mobile version of the collection page to confirm the title and price are aligned correctly.

---

Easier Solution with EasyEdits

If you’d prefer a no-code solution, EasyEdits can help you visually align elements with a simple drag-and-drop interface. You can try it during the free trial and keep your changes forever.

---

Let me know if you need further help or if you’d like me to guide you through testing the class names!