How to adjust text to be written in 1 line instead of 2 for mobile

[NikosBat]

Hello guys, how can I adjust this text to be written in 1 line instead of 2 for mobile?

 

[EstherBui · Accepted solution]

Hi @NikosBat 

You can follow the instruction here :

1. Go to Shopify > Online store > theme > customize

2. Click to Settings > Custom CSS > Paste this code to the section and save.

.icon-with-text--horizontal .h4 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

h4, .h4 {
    font-size: 10px;
}

Result :

I hope it helps. 

Esther 

[NikosBat]

Thanks for helping me EstherBui, that solved my problem

[DaisyVo]

Hi @NikosBat ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
ul.icon-with-text.icon-with-text--horizontal.list-unstyled {
    gap: 0 !important;
}
ul.icon-with-text.icon-with-text--horizontal.list-unstyled li.icon-with-text__item
 span.h4.inline-richtext {
    font-size: 10px !important;
}
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[NikosBat]

Thanks for helping me DaisyVo, that solved my problem

[GTLOfficial]

Hello @NikosBat
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.h4.inline-richtext {
font-size: 9px !important;
}
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[NikosBat]

Thanks for helping me GTLOfficial, that solved my problem