WebSite X5Help Center

 
eyal melamed
eyal melamed
User

Responsive text  en

Author: eyal melamed
Visited 1331, Followers 2, Shared 0  

Hello,

Is there a way to get text size to be responsive?

I've noticed that text remains same size at all objects : Text, Title, Animated Headline and even as Object style/text/Title or description text.

I have image categories and the thing is that while my images becomes small responsively, the headline for those images stays same big size and not proportional anymore on phone sizes.

Thanks

Posted on the
13 ANSWERS - 1 USEFUL
Andre E
Andre E
Moderator

No this is not possoible.
But you must have used a very big text then. Try to reduce it.

But I have no picture or example so i have to gues a little bit on the issue;

Text on pictures are difficult you need to find an in between solution in that case.

Normaly i would like the normal text to get bigger on a smaller screen because else you normal text won't be readable at all. The screen is already many times smaller!

In the header and footer you can use other objects and hide objects, so that is always adjustable to viewport and should always be correct.

But not on pages.

maybe create an IDEA post for Incomedia, although beware of my remark all other text will then also become smaller I am not sure if this is usefull.

A customer selectable font is also an option (for Incomedia to create in the future) but the small screen is already difficult to view so more option for customers on it is maybe not a good IDEA as well.

Or make pages akkording to viewports like header and footer, but that would make you to check all viewports for every page, this is very time consuming.

So a lot of plus en minus items.

But an example from you would help if above is not helpful.

Best Regards,

Read more
Posted on the from Andre E
Mini M.
Mini M.
User

Witaj

Pozostaje jedynie użycie dodatkowego stylu css dla danych rozdzielczości

Read more
Posted on the from Mini M.
Tom G.
Tom G.
User

Well, actually it is possible...

Here's what I do.

I have the word "WELCOME", which I make responsive:

(both snapshots are in the same scale - see the same bottle size).

First you have to find an object using "Inspect Source" on the view page. If you look for the text (in my case "WELCOME") you will find it as shown below:

Having that you put following code in 3 Map - your page - Properties - Expert.

The code will force font size to be 31pt (much smaller than the original) for all resolutions below 720px.

You can do the same with any object on the page for any resolution.

Read more
Posted on the from Tom G.
Andre E
Andre E
Moderator

I ment in x5. But very nice G. Thomas

Read more
Posted on the from Andre E
eyal melamed
eyal melamed
User
Author

Thank you G. Thomas.

I will try that

Read more
Posted on the from eyal melamed
eyal melamed
eyal melamed
User
Author

Thank you Aleksey,
Can you please elaborate on that?
I'm not that familiar with code
(They wrote easy cheezy, but to me not that easy. i don't even know where to put it)

Read more
Posted on the from eyal melamed
eyal melamed
eyal melamed
User
Author

Hello G.Thomas

Tried your suggestion and it works very good. Work even on plug ins.smile

I've tried it on Animated headlines and it works good as well. e.g.:

<style>

@media (max-width: 439px){
#pluginAppObj_18 .cd-headline b, #pluginAppObj_18 .cd-headline i, #pluginAppObj_18 .cd-headline em {
font-size: 12px;
line-height: 32px;
}
}

</style>

My question is:

I have 12 objects of titles (or texts), and in this method i can only copy one object parameters. (in this example # 18).

Is there a way to get code that will refer to all similar objects of that page?

Thank you

Read more
Posted on the from eyal melamed
Tom G.
Tom G.
User

I am not sure if I understand it right. This is what I do for multiple objects to be scaled down (and this is the rel code):

And this is the page for large resolution:

... and for smaller. As you can see the bottle is the same size on both:

I hope this is what you asked for.

Tom

Read more
Posted on the from Tom G.
eyal melamed
eyal melamed
User
Author

Yes, That's what I did. multiple objects with their different numbers:

<style>

@media (max-width: 439px){
#pluginAppObj_17 .cd-headline b, #pluginAppObj_17 .cd-headline i, #pluginAppObj_17 .cd-headline em {
font-size: 12px;
line-height: 32px;
}

#pluginAppObj_18 .cd-headline b, #pluginAppObj_18 .cd-headline i, #pluginAppObj_18 .cd-headline em {
font-size: 12px;
line-height: 32px;
} 

#pluginAppObj_19 .cd-headline b, #pluginAppObj_19 .cd-headline i, #pluginAppObj_19 .cd-headline em {
font-size: 12px;
line-height: 32px;
} 

    
}

</style>

My question was: Is there in HTML or CSS (or external css, or a loop), a way to work with variable instead of e.g. :  _17,_18,_19 and so on ?

So it will be applied to all same objects in that page 

Thanks

Read more
Posted on the from eyal melamed
Esahc ..
Esahc ..
Moderator

eyal

I know that this is a "low tech" solution, but would adding the text to an image provide a suitable work-around?

If you look at this http://supersealing.com.au/v3/ you will see the text is totally responsive (top rh cell) and required absolutely no coding. (I have used a text object with 6 pics in 6 tabs, 3 with text as part of the image, 3 without and set to slideshow)

I have not seen your site, so I do not know your requirements, but this approach may provide a simple solution to some of your problems.

Read more
Posted on the from Esahc ..
eyal melamed
eyal melamed
User
Author

Thank you Thomas and Esach, and sorry for late response.

I'm going to check now.

Read more
Posted on the from eyal melamed