How To: make sure text elements will be responsive and look the way you want on both desktop and mobile view

  • 0
  • 3
  • Idea
  • Updated 2 years ago
  • (Edited)
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: Archived

Hello all:

A ton of people have been commenting on how frustrated they are with the apparent inability to edit text in mobile view after they've gotten their desktop view looking the way they want, and believe me when I say I've been there. Through a ton of trial and error I was able to figure out how to make text elements responsive to editing in the mobile view, and wanted to post a quick "how to" guide to hopefully make life a little easier for anyone having problems.

Please note that once you use this method on a text element and get it looking the way you want it in both the desktop and mobile views, you should then use that text element as a template for all other text elements you intend to put on your site by just copying the element (or one of its copies) each time you want to add another text element to your site. If you do this, the changes you made to your template text element will be there in the mobile view, which means you won't have to go back and edit every text element on your site in mobile view (like I was doing before I figured this trick out).  Also, please excuse the large screen shots, but I wanted to make sure people could see what I was doing on each step.

Creating your template text element:

First click the Add button and select the type of text element you want. I've selected a paragraph here.


Then select the text element (don't click into it), and click the 'Style' tab of the menu that pops up.


In the 'Style' sub-menu, click the little cogwheel circled below


And do whatever adjustments you want to do to the text ONLY from this menu - if you directly highlight the text in the text element and do pretty much anything to it, it will not be responsive in the mobile view. The only exceptions I've found are if you click into the text element and select 'justify' or if you directly highlight some text and link it.


I'm adding this screenshot as a warning: This is the menu that appears if you click into a text element. If you do pretty much ANYTHING to the text directly from this menu, it will not be responsive in the mobile view. The only exceptions I've found are if you click into the text element and select 'justify' or if you directly highlight some text and link it. That's it. Everything else seems to bug the text element.


Switching now to the mobile view, select the text element (don't click into it), and click the 'Style' tab of the menu that pops up.




Note that the option to change the mobile view of the text element to "Custom Style in Mobile" appears. Click the little slider to 'on.'


Now just make whatever changes you want to the text in mobile view using the same method as the desktop view, but again - ONLY USING THIS MENU.



Viola - you now have a template text element you can use for your entire site that will already have whatever appearance you'd like in mobile view. :)

As a quick example of putting this into practice, switch back to the desktop view, select the text element (don't click into it), and click 'copy.'


Then move the copied text element so it isn't overlapping your template text element, and switch to mobile view. As you can see, the copied element already has whatever changes you made to the original text element already associated with it.


For everyone who has already done tons of work on their sites and don't want to reinvent the wheel, don't fret. You can transfer all non-responsive text already on your site to one of your template text elements by just copy/pasting from the old non-responsive text element into one of your new responsive text element templates.

Sorry for the long-winded explanation, but I hope this helps. The mobile view really is awesome, you just have to use this method to actually make it work :)
Photo of SanDiegoTicketExpert

SanDiegoTicketExpert

  • 1,708 Points 1k badge 2x thumb

Posted 2 years ago

  • 0
  • 3
Photo of susan2829

susan2829, Champion

  • 42,880 Points 20k badge 2x thumb
Excellent presentation/explanation SD. Thank you for taking the time to put it together for those of us who are struggling with the text issue. Pictures are a real PLUS!  :)

Good on you.
Photo of SanDiegoTicketExpert

SanDiegoTicketExpert

  • 1,708 Points 1k badge 2x thumb
Thanks Susan, I appreciate it. I just hate reading comments on here about people giving up, and although, yes, it's a pain to go back and redo your work, the copy/pasting into your responsive template really does go pretty quick. And the mobile view really is great compared to Duda.

Thanks again :) Cheers
Photo of SanDiegoTicketExpert

SanDiegoTicketExpert

  • 1,708 Points 1k badge 2x thumb
Quick post script: this method also works for images ;)
Photo of Jonathan T.

Jonathan T.

  • 5,802 Points 5k badge 2x thumb
I finally got around to trying this, and I really appreciate the help. Although, this is a pain, I'm glad there is a way to making text more responsive!
Photo of ab

ab

  • 290 Points 250 badge 2x thumb
Thank you -- it worked.  But I had to do the following.  Choose a text element.  A menu appears above the text box.  No menu shows on the right. So on the menu that's showing i choose "more", then choose "advanced" and the menu you reference appears on the right.  I then followed your instructions.  I spent an hour trying to achieve modifying text in the mobile view.  You solved that problem.  Thank you again.
Photo of susan2829

susan2829, Champion

  • 42,880 Points 20k badge 2x thumb
Between the time SD posted this and a few days ago they changed the text editor so yes, now you need to click More > Advanced in order to access the menu.

Photo of SEEN1011

SEEN1011

  • 742 Points 500 badge 2x thumb
Great help, thanks for putting in that time for all of us :-)

This conversation is no longer open for comments or replies.