Make homepage HTML Text Section Layout different on Desktop vs Mobile

Technical Q&A

Topic summary

  • Goal: Keep a homepage HTML Text Section as a single line on desktop, but display the same text as four separate lines on mobile.

  • Steps taken: A helper requested the site URL and password to inspect; the requester shared them via private message and later asked for further help.

  • Proposed solution: Add a CSS media query in theme.css targeting screens up to 768px that adjusts the font size for .custom__item-inner span to 25px (using !important). A media query is a CSS rule that applies styles only under certain conditions, such as specific screen widths.

  • Note on effectiveness: The provided CSS only changes font size on mobile. It does not explicitly force the text into four distinct lines (e.g., via line breaks or block-level styling). Additional CSS/HTML changes may be needed to ensure four-line formatting on mobile.

  • Status: No confirmation of resolution; outcome remains unclear. The code snippet is central to the proposed fix.

Summarized with AI on February 11. AI used: gpt-5.
1

I have added a custom content HTML Text Section on my homepage. How can I keep the text as one (1) line across on desktop but have the HTML text show as four (4) separate lines on mobile? Same text own both just split up on mobile.

The 4 lines of text looks wierd on desktop but fits good on mobile. Any help would be appreciated!

2

Hi @Jeffro1234 ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

private messaged

4

Anyone?

5

Hi @Jeffro1234 ,

Go to Assets > theme.css and paste this at the bottom of the file:

@media only screen and (max-width:768px){
	.custom__item-inner span {
		font-size: 25px !important;
	}
}

Hope it helps!