Responsive text
Author: eyal melamed
Visited 3838,
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
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,
Witaj
Pozostaje jedynie użycie dodatkowego stylu css dla danych rozdzielczości
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.
I ment in x5. But very nice G. Thomas
Author
Thank you G. Thomas.
I will try that
Another solution : use vw - viewport width... not need @media
.imTextObject_11_tab0 {
font-size: 10vw;
}
https://css-tricks.com/viewport-sized-typography/
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)
Author
Hello G.Thomas
Tried your suggestion and it works very good. Work even on plug ins.
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
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
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
Looks like you would like something like "CSS wildcard". I am not sure if CSS is "smart" enough to accept wildcards. I found this web page: http://www.surfingsuccess.com/css/css-wildcard-css-attribute-selector.html but I doubt it will be of any help...
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.
Author
Thank you Thomas and Esach, and sorry for late response.
I'm going to check now.