Aligning text and metafield - liquid code (Gempages)

Store Design
,
1

Hello

I’m editing my product page using GemPages.

I’m running into an problem with the aligment of the combination between text and the Metafield.

The following code makes the metafield itself being place on a line below the text.

In this code I want the text “Doelgroep:” to be next to the metafield (Performance).

  • Doelgroep:

    {{product.metafields.custom.doelgroep.value}}

  • Type:

    {{product.metafields.custom.type.value}}

  • Gewicht (gr)

    ;{{product.metafields.custom.gewicht.value}}

meta tekst.PNG
meta tekst.PNG744×359 8.88 KB

1 Like
2

Hello @Toby5 :waving_hand:

You can add this CSS code (either by editing theme code, or using Gempages)

ul .product__text {
display: inline-block !important;
}

That should solve the problem. Hope that helps!

3

@Toby5

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Thanks @ZenoPageBuilder !

That solved the alignement. I added a   to create a space between the text and metafield.

Do you also know how to reduce the spacing between the lines?

I want it to be:

  • Doelgroep: performance
  • Type: Controle
  • Gewicht (gr): 224 - 235

And not like it is published now on the site:

meta tekst.PNG
meta tekst.PNG510×268 6.97 KB

5

Hi @Toby5

I need to check the page to provide the solution. Can you share the page URL?

6

The outlining issue is resolved by removing the text field from the code, I added the text directly in the metafield itself.

Not the perfect way but I wil will keep it at that because I am not very great with code :-).

7

Yes that is also a good solution, no more code is usually better :slightly_smiling_face: