Solved

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

sycomsimon
New Member
5 0 0

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.

 

Screenshot 2024-05-08 at 5.21.13 PM.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

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

Replies 8 (8)

ThePrimeWeb
Shopify Partner
2127 608 473

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
New Member
5 0 0

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
Shopify Partner
2127 608 473

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
New Member
5 0 0

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
Shopify Partner
2127 608 473

Hey @sycomsimon,

 

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

 

Option 1: Align from review onwards.

ThePrimeWeb_0-1715238981079.png

 

Option 2: Align price only

ThePrimeWeb_1-1715239006647.png

 

 

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.

ThePrimeWeb_2-1715239125464.jpeg

 

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
New Member
5 0 0

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 🙂After code removed boxes are shorter.jpeg

 

WhatsApp Image 2024-05-10 at 07.18.04.jpeg

ThePrimeWeb
Shopify Partner
2127 608 473

This is an accepted solution.

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
Shopify Partner
1103 164 161

@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