Resizing links on product page

[radaApeta]

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 ! 🙂

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

0007

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
ul.icon-with-text.icon-with-text--vertical.list-unstyled.icon-with-text--text-only li.icon-with-text__item span {
    font-size: 10px !imporatnt;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[radaApeta]

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

[radaApeta]

@Moeed  can you help wtith this please ?

[Made4uo-Ribe]

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. 

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!

[radaApeta]

Hello,

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

[Made4uo-Ribe]

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:

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

[radaApeta]

hey, 

i am sorry but this code doesnt work for me.