Hiding/Replacing Text & Elements in...

User 2706435 Photo


Ambassador
397 posts

What is the best way at smaller viewports to change the text content of elements that appear? Suppose I have a long paragraph, but I want to reword it for a smaller device?

The only way I can think is to add display none to the old version, then write a new version, then go back and "Display None" to the new paragraph for every larger breakpoint?
User 187934 Photo


Senior Advisor
18,798 posts

You can do it that way or with css content or JQuery.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2706435 Photo


Ambassador
397 posts

How would you do it with css content? You mean in a separate editor?
User 2706435 Photo


Ambassador
397 posts

I never used it before in my old ways of handcoding because I never did anything complex except for layouts - so I searched CSS Content and low and behold! Its a property I forgot about! So, do you mean to set the paragraphs that need changed to display:none, and use content with pseudo elements? before or after?

How would I do this with RSD? I don't think there is a way to do it all in RSD. So, would I need a separate style sheet, linked in the head, that contains the new paragraphs?
1. Set Display none in RSD (or set it in style sheet below to keep breakpoints coordinated)
@media screen and (max-width: breakpoint px) {
p#mobile1:before {
content: 'new paragraph';
display:block }
}

I would much rather use the above method if that works because I could target other breakpoint where too much text breaks a layout or send special content "below the fold," and then possible tweak styling meant for that specific paragraph such as a possible bump up in font size (or smaller)

I have not used custom style sheets yet in RSD, would they preview in RSD?
User 2706435 Photo


Ambassador
397 posts

I forgot, a unique ID would have to be assigned to that paragraph as I did in the proposed code; "mobile1"

And, if it will preview in RSD, all changes to that custom css file have to be imported the resources before seeing any new changes?
User 187934 Photo


Senior Advisor
18,798 posts

I was only giving options but I think the easiest to do would be to have two p elements and use the display none or block at the needed break point. The amount of page size increase from a <p> will be hardly noticed.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2706435 Photo


Ambassador
397 posts

Yes, I thought about that. My concern about about summarizing two paragraphs into one. And then having that summary paragraph littered through other breakpoints, including different summaries for a tablet view. If I add an extra summary paragraph, then I have to go to the largest breakpoint, make it hidden, then find it again on mobile and make it visible. Just hiding the element is probably better 99% of the time, but I like figuring out some of this stuff...

I did just now figure out how to do it with CSS. Rules prevent the display:hidden to allow a pseudo element to just pop content before it. It will still be hidden. So this is want can be done, and I believe this is the only way using RSD and a single CSS file.

The text to be replaced must be added to RSD as an HTML Element. The styling of that text must be done in a custom CSS file. I would just copy paste the classes and ID that RSD puts out. This is a two part strategy.

Inside the tag that you enter text, the tag must be wrapped with a <span></span>or something else. ID the paragraph tag (or wrapping tag). It will look like this in the HTML editor window in RSD: <p id="trouble"><span>Original Text</span></p>. In the custom CSS file, we are going to make a media query for the breakpoint. This will cascade down if using max-width. Inside that media query style, make the span hidden, NOT the paragraph. Then, insert the text using the before pseudo class, into the paragraph (the paragraph has no text given to it, if you make the paragraph hidden, any content added to it will also be hidden). Add the css file to the resources, and add that resource file in the setting tab to the header.

This is my code I used in a custom CSS.
@media screen and (max-width: 500px) {
#trouble span {display:none;}
#trouble:before {
content: 'Paragraph replacement text, figuring out the hardest and most obtuse ways to do things for niche applications';
color:green; font-weight:bold;}}



User 187934 Photo


Senior Advisor
18,798 posts

If that's all the text you need then that should be fine.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1769062 Photo


Registered User
2 posts

I tried the 'None' setting in the Text / Display / None for Mobile but then when I set it back to Block at the Tablet stop it just turns the text back on across all stops. Does anyone have a fix?
User 122279 Photo


Senior Advisor
12,676 posts
Online Now

Have you got a project file to share?
Ha en riktig god dag!
Inger, Norway
My new honey site, built with RFF: https://eikweb.com/horgenhonning/
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.