WebSite X5Help Center

 
eyal melamed
eyal melamed
User

Responsive text  en

Autor: eyal melamed
Visitado 3875, Seguidores 2, Compartilhado 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

Publicado em
13 RESPOSTAS - 1 ÚTIL
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,

Ler mais
Publicado em de Andre E
Mini M.
Mini M.
User

Witaj

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

Ler mais
Publicado em de 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.

Ler mais
Publicado em de Tom G.
Andre E
Andre E
Moderator

I ment in x5. But very nice G. Thomas

Ler mais
Publicado em de Andre E
eyal melamed
eyal melamed
User
Autor

Thank you G. Thomas.

I will try that

Ler mais
Publicado em de eyal melamed
eyal melamed
eyal melamed
User
Autor

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)

Ler mais
Publicado em de eyal melamed
eyal melamed
eyal melamed
User
Autor

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

Ler mais
Publicado em de 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

Ler mais
Publicado em de Tom G.
eyal melamed
eyal melamed
User
Autor

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

Ler mais
Publicado em de 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.

Ler mais
Publicado em de Esahc ..
eyal melamed
eyal melamed
User
Autor

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

I'm going to check now.

Ler mais
Publicado em de eyal melamed