How can I display section text in one line on my collection page?

Store Design

Topic summary

A user wants to display bubble section text on their collection page in a single line instead of wrapping to two lines.

Initial Solutions Provided:

  • Basic CSS using white-space: nowrap was suggested for desktop
  • Desktop implementation worked successfully

Mobile Display Issue:

  • The text merges/overlaps on mobile devices when forced to one line
  • User seeks a solution that keeps text in one line without elements merging into each other

Proposed Mobile Fix:
Multiple CSS solutions were offered targeting mobile screens (max-width: 767px):

  • Adjust font-size to 9px
  • Set line-height to 1.2
  • Use white-space: initial or nowrap depending on approach
  • Code should be added to the theme’s base.css file

Current Status:
One mobile solution reportedly did not resolve the merging issue. A final CSS snippet was provided that may address the problem, but confirmation of success is pending.

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

Hey, so I have a bubbles section in my collection. I wanna display the text of that section in 1 line instead of 2. Is it possible?

Capture.JPG
Capture.JPG1865×782 112 KB

https://www.saya.pk/collections/end-of-season-sale-1

2

.bubble_text {

white-space: nowrap;

margin: 0;

font-size: 12px;

text-align: center;

line-height: 1.2;

margin-top: 5px;

}

add this CSS

3

Hi @Moeed

Kindly add below CSS at proper place to make the text in one line

@media screen and (min-width: 769px){
.bubble_text b {
	white-space: nowrap;
	font-size: 12px;
}
}

Thanks

4

Hey @Sheesh_b @mics
It did work on desktop, but I want to make it better for mobile as well. I want to make it in one line without the text merging into each other.

Capture.JPG
Capture.JPG248×542 26.2 KB

5

@media screen and (max-width: 767px) {
.bubble_text p {
font-size: 9px;
line-height: 1.2;
}
}

6

Unfortunately did not worked; the text is still merging onto the mobile

7

@Moeed

  1. In your Shopify Admin go to online store > themes > actions > edit code

  2. Find Asset > base.css and paste this at the bottom of the file:

@media screen and (max-width: 767px) {
.bubble_text b{
 font-size: 9px; 
 line-height: 1.2;
 white-space: initial;
  }
}

This code fix your issue.

Thank you !