Need to align on one horizontal line please for the love of God lol

sycomsimon · ‎05-08-2024

Yes, some descriptions are two lines and some one line which pushes the prices/text etc...out of whack how can I make all of them align horizontally without having to expand one liner texts to two. Which is of course not doable because there are literally hundreds of products.

Almost need to say pad out all products to 2x lines of text thus pushing everything to line up? does that make sense? See pic below for whack alignment...lol.... Someone please help > Using the Expanse Theme.

*NB: Also on mobile some are pushing out to 4 lines of text downwards which makes it look quite ahem....**bleep**!

Many thanks in advance,

Simon.

ThePrimeWeb · ‎05-09-2024

Oh, Apple strikes again. It's a norm for things to work perfectly everywhere else except for Safari on Mac or iOS. It's a nightmare honestly.

Try this code and it should work on all platforms.

Option 1:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid-item__meta-main {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-product__title {
    height: 100% !important;
}
</style>

Option 2:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎05-08-2024

Hey @sycomsimon,

Can you share the link to your store please?

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sycomsimon · ‎05-08-2024

no can do is a customer/friends store unfortunately and they would not like that.... What do you need to know /screenshot and i can get anything like that for you 🙂 Thanks

ThePrimeWeb · ‎05-08-2024

Well, I need to go to the webpage and inspect to see what can be changed. Basically, I have to test it live. I guess I won't be able to help then.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sycomsimon · ‎05-08-2024

Thanks i appreciate you and here's the link because i understand the inspect aspect 😉 This is for the collections but in reality want to make it a default for all product pages ideally please.

Most grateful 🙂 Thank you.

https://www.tslskincare.com.au/collections/mothers-day-gifts

ThePrimeWeb · ‎05-09-2024

Hey @sycomsimon,

I'm not sure which option you want, so I'll add both anyway.

Option 1: Align from review onwards.

Option 2: Align price only

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

Option 1:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

.grid-item__content {
    height: -webkit-fill-available !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid-item__meta-main {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-product__title {
    height: 100% !important;
}
</style>

Option 2:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

.grid-item__content {
    height: -webkit-fill-available !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

sycomsimon · ‎05-09-2024

So both 'worked' however when i tested it on Mobile it made the container/boxes very long. see attached pic 🙂 Thanks

Is there anything to make it dynamic so that it doesn't reach that length please?

Also added in another pic showing heights after code removed and back to 'original' state

Appreciate your help 🙂

ThePrimeWeb · ‎05-09-2024

Oh, Apple strikes again. It's a norm for things to work perfectly everywhere else except for Safari on Mac or iOS. It's a nightmare honestly.

Try this code and it should work on all platforms.

Option 1:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.grid-item__meta-main {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-product__title {
    height: 100% !important;
}
</style>

Option 2:

<style>
.grid-item__content .grid-item__meta {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.grid-item__meta-secondary {
    height: fit-content !important;
    flex: none !important;
    margin: 0 !important;
}

span.shopify-product-reviews-badge {
    display: none !important;
}

a.grid-item__link {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

webwondersco · ‎05-08-2024

@sycomsimon Hello,

Hope you are doing well

could you please share your store URL so can check and guide you accordingly?

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip ☕ would be greatly appreciated. :)..! Instagram

Need to align on one horizontal line please for the love of God lol