Viewing A widget that will scale text in a responsive row?

A widget that will scale text in a responsive row?



User: Ben L. 4 years ago
I need to have title text larger than the body text. When viewed on a smaller mobile device it goes off the page and the viewer needs to scroll right to read it.

Does EverWeb have some kind of widget that will either re-size the text to fit, or break the text onto separate lines so it can be viewed all at once on the smaller screen?

All ears,


Ben
User: Roddy 4 years ago
The widget I already sent you creates responsive text size using viewport units.

I have made another one which uses media queries to change the font size at different browser/device widths. This will perhaps be easier to use for those who are not familiar with viewport units.

Both examples can be seen on THIS page.

Note that these widgets should be used on their own and must NOT be inserted in a Responsive Row widget. The Responsive Row widget is a workaround to allow fixed with items to be grouped and made responsive.

All the widgets in the EverWeb Responsive range and the new EverWeb Grid widgets are fully responsive in their own right.

Last edit 4 years ago

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Ben L. 4 years ago
Hi Roddy,

Slow to get back to you. I'm studying your CSS grid system. Trying to figure out how to use it. I can't seem to find the 'media queries' widget you mention, I'm going around in circles on your site. I've tried to work with the 'viewport units' widget ... but somehow I'm just not understanding how it works. I feel like I want to set the biggest and smallest 'font size' (which is probably what the media queries widget is about). With the viewport units I do manage to get it looking right for the big screen and the small screen ... but somewhere in the middle the font pops unexpected large and goes into two lines for some reason. So I'm not using it right.

I'm wondering if there is some instruction on your website how to set up a page (with the various elements) using your CSS Grid Module? I got your 'Grid Elements 1' set of widgets ... do they give me everything I need for doing a whole page layout? If I know that at least I can bumble around trying to figure it out.

Apologies for being slow. Ask me how to produce a 90 minute film and I can tell you almost anything you need to know. But website construction?! Duh.

Ben
User: Roddy 4 years ago
There are general instructions for setting up a responsive page HERE and an introduction to the CSS Grid Layout Module HERE.

Creating a responsive page requires a different mindset. Using widgets makes it easy as you simply stack them up in the required order and rearrange them by dragging them up or down the page.

I have sent you a copy of the widget for creating a heading with responsive text using media queries.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Paul-RAGESW 4 years ago
Hi Ben,

Quote:
Does EverWeb have some kind of widget that will either re-size the text to fit, or break the text onto separate lines so it can be viewed all at once on the smaller screen?


The FlexBox widget may be what you need here.

-------------------------------
Paul
EverWeb Developer


Post Reply
You must login or signup to post.