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

Shopify Discussion

Topic summary

A Shopify store owner needed help fitting text into a single line on mobile devices instead of wrapping to two lines. The issue involved icon-with-text elements displaying across multiple lines on mobile screens.

Solutions Provided:

Three community members offered CSS-based solutions:

  • EstherBui: Suggested adding CSS to force single-line display using white-space: nowrap and text-overflow: ellipsis, plus reducing font size to 10px

  • DaisyVo: Recommended mobile-specific CSS (max-width: 768px) to reduce gap spacing and decrease font size to 10px

  • GTLOfficial: Proposed editing the base.css file directly with mobile-specific CSS (max-width: 749px) to reduce font size to 9px

Outcome:

All three solutions successfully resolved the issue. The original poster confirmed each approach worked, indicating multiple valid methods exist for this common mobile text formatting problem. Each solution included screenshots demonstrating the before/after results.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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

Bildschirmfoto 2025-01-14 um 23.47.25.png
Bildschirmfoto 2025-01-14 um 23.47.25.png618×1174 262 KB

2

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 :

EstherBui_0-1736896977385.png
EstherBui_0-1736896977385.png440×856 39.6 KB

I hope it helps.

Esther

1 Like
3

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:

DaisyVo_0-1736898876414.png
DaisyVo_0-1736898876414.png440×407 44.4 KB

Please let me know if it works!

Best,

Daisy

1 Like
4

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

142.png
142.png429×563 32.1 KB

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

1 Like
5

Thanks for helping me EstherBui, that solved my problem

6

Thanks for helping me DaisyVo, that solved my problem

7

Thanks for helping me GTLOfficial, that solved my problem