Editing text on mobile version only

First off, I’m brand new to Webflow, so please forgive me if I’m asking a question with a very obvious solution.

I’m rebuilding an existing site. I have a page of lengthy running text with multiple headers. It’s easy to read the text on the desktop version, but when viewed on a phone, requires a ton of scrolling to get to your subject.

My solution was to reconfigure the text on the mobile version so that the headers serve as accordion triggers and the text can drop down beneath it. Unfortunately, I discovered that making this change affected the text on the desktop and tablet versions, which I want to leave as is.

So the question is, is there a way to edit the text on mobile and not have it affect the versions that are “above” it?

Again, this may have a ridiculously obvious solution, but it’s not so to a newbie.

Thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

This forum exist just-for-that :smiley: So you’re much excused.

I’m confused, nowhere are you saying that you edited the text. Did you also edit the text?

Of course not! The text is either just text, heading or paragraph, list, in the DOM, meaning in the HTML. Responsivity only affects Styles, so CSS, nothing in the HTML document is affected by the breakpoints.

But you can totally have a version of your text for Desktop, that you’re going to hide on mobile, and a version of the text for mobile, that you’ll hide for desktop. That’s just text, so it’s not too heavy.

1 Like

Thanks, Vincent!

The text “editing” came when I cut the text from the text box and started to insert Div blocks into which I would set up accordions. Before I got too far with it, I went back to the desktop version and discovered that the text I’d removed was gone.

So how do I hide a text block from one size version but not another?

@HudsonValleyDesigner take a look at this

2 Likes

Thank you. I was searching for a “hide” button but didn’t know where to find it.

I think I can figure it out from here.