Resizing links on product page

Store Design
, , ,
1

Hello,

i need a small adjustment on my product page, under every product there are 3 links ( Doprava a platba + Vrácení a reklamace + Časté dotazy ). I need those three links to be in a single row. Thank you for your help ! :slightly_smiling_face:

https://81e325-28.myshopify.com/

0007

unnamed (10).jpg
unnamed (10).jpg828×1792 128 KB

2 Likes
2

Hey @radaApeta

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1726682329959.png
Moeed_0-1726682329959.png344×611 25.9 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello, thank you for your idea, i dont know where is the issue but the code isnt working.

radaApeta_0-1726683268082.png
radaApeta_0-1726683268082.png1920×1080 215 KB

4

Hi @radaApeta

When the screen are smaller it will automatically go down. To be responsive on smaller screen. This is the result if you maintain it single row.

Made4uoRibe_0-1726686986988.png
Made4uoRibe_0-1726686986988.png420×218 7.35 KB

If it this is okay, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

li.icon-with-text__item span.h4.inline-richtext {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

Hello,

thank you for your solution, but i really wants it to be in one line.

6

@Moeed can you help wtith this please ?

7

okay, as you like. Replace on this one then.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

li.icon-with-text__item span.h4.inline-richtext {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
}
li.icon-with-text__item span.h4.inline-richtext a {
    word-break: keep-all !important;
    width: 100% !important;
    white-space:nowrap;
    padding-right: 10px;
}

And Save.

Result:

Made4uoRibe_0-1726755865223.png
Made4uoRibe_0-1726755865223.png482×340 8.85 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

hey,

i am sorry but this code doesnt work for me.