Text In Variants

[Chris M]

This is something where the penny just will not drop for me: altering the text size in a variant.

What method can I use to edit the text size without it altering the other variants but maintain the sharing? As an example, I would like the text to say Hello World at size 18 on the mobile site and size 16 on the main site but still be able to alter the colour/spelling etc and have it reflect on both variants.

Ideally I would like to simply grab the diagonal selection handles an resize the sucker as I would an image. A while ago, boy advised me to look into Styles, which, while I learned a lot, made me rock back and forth in a corner and sob quietly.

I am determined to get comfortable with this as I can't afford to keep replacing smashed keyboards.

[Egg Bramhill]

Hi Chris, I don't know if this helps, but once you set say normal text to have different size, font , justification etc via "Update Normal Text in this Variant" you're creating two distinct styles, so to globally change the colour you will need to set that colour change in both styles independently "Update Normal Text in this Variant" on each occasion.

I can't think of any reason to change the spelling in either variant as they're shared across all variants.

[Chris M]

Create site and then create variant
Select text box and click Update Normal Text In This Variant
Edit font size (either dragging selection handles or via font size drop down)
Size alters on both variants

The colour/spelling reference was just to explain I want to keep the sharing aspect, I only struggle with the sizing.

[Egg Bramhill]

I don't do it like that Chris.

Create site and then create variant.

It can be confusing, you can create text by just clicking in the text tool anywhere on the page = a Text Line
or
create text by clicking & dragging the mouse horizontally in the text tool= a Text Column
or
create text by clicking and dragging right & down in the text tool = a Text Area

Sorry if I'm teaching you how to suck eggs.

I tend to use Text Areas which show as red dotted lines around the text if you're in the Text tool.
So you've created the Main site & then created a Mobile Variant.

The Main site will be fine.
The Mobile site may need the text container resized, for example it's wider that the mobile screen.
So click the top right corner in the text tool and narrow the width down from the right to fit page width.

Having done this there almost always won't be enough height in the text area and you'll need to lengthen the area down.

I recommend using push with these text areas or they can easily overlay other page content.

Now, in the Mobile variant you can select all (or part) of the text content and change the font, the size & colour.

Then the style (say normal text) will have a plus sign appended to the end (normal text +)

This is the time you are required to select the style and hit Update style in this variant. The style remains as per original in the Main site but takes on a different style in the Mobile site.

In your example:

Create site and then create variant
Select text box and click Update Normal Text In This Variant
Edit font size (either dragging selection handles or via font size drop down)
Size alters on both variants

Is basically arse about tit.

You need to edit the mobile font first by changing size, font, etc then select Update Normal Text In This Variant.

[Chris M]

Egg, you are an excellent educator because you explain the basics, which is where a lot of mistakes are made.

I too create a text Area 99% of the time and also adjust row width to create multiple rows in a mobile variant (although I generally don't use Push). So far we are on the same page.

Now what happens (for me) is I select the text on the Mobile site and Update This Variant, then alter text size from 28 to whatever. The Main site text is now magically 24, not 28. It has to be 28, so I change it back to 28...Mobile site is now 28. Rinse and repeat using different sizes in the Mobile, same result.

Attached example was created thusly:
Create site > add rectangle > add text area > change size and colour > drag text onto rectangle > create mobile variant
On mobile, select text and update this variant > edit size of text > wheels fall off
Confused.web

[Egg Bramhill]

Now what happens (for me) is I select the text on the Mobile site and Update This Variant, then alter text size from 28 to whatever. The Main site text is now magically 24, not 28. It has to be 28, so I change it back to 28...Mobile site is now 28. Rinse and repeat using different sizes in the Mobile, same result.

That's where you're getting it arse over tit as mentioned earlier Chris.

Don't select the text in the mobile site and Update this variant. Do the reverse. Select the text (all or just part) change as required THEN select Update Style in This Variant .

[Chris M]

Edited size from 28 to 14 in mobile > Update This Variant
Size in Main now 24 > change back to 28 > mobile now 28

Started from scratch just in case my messing around had made the whole thing pear shaped.

Created rectangle > created text area > set size to 28 and changed colour to white > created mobile variant
In mobile variant: edited text to size 14 > update normal text in this variant
Main site: Text is now black and size 13

Head shaped hole in wall.

[Know1]

Chris M, you forgot one step.

Created rectangle > created text area > set size to 28 and changed colour to white > "Update normal text to match" > After that you can create your mobile variant.

[Chris M]

It took an egg and a rabbit, but the penny has dropped. The missing piece to the jigsaw puzzle has been located and it's all so obvious now.

As soon as I altered the text (size, colour, font, whatever) it stops being 'Normal' and becomes Normal+. This, this is the bit that wouldn't sink in. So when I 'Update "Normal" Text In This Variant' my original text sat there saying 'nothing to do with me, I'm Normal+'. I was aware of the + but just assumed it signified that it had been edited, not classed as a different style.
Thank you for taking the time to help.

[Egg Bramhill]

And it wasn't even Easter.