Fluid text for semi-responsiveness


I know Unbounce doesn’t support true responsiveness just yet, but I’m wondering if anyone is familiar with a way to get at least text fields to change their width as the user changes the width of their browser window. Whether it be using some CSS in the standard text drop or a Custom HTML box.

My page is designed at 1280 wide, so anything above that is fine, but for anyone that is on a lower resolution computer or keeps their browser window narrower than that will not be getting the best experience. So I want to ensure at least some responsiveness.


4 replies

Userlevel 7
Badge +4

Great question - I am also curious to know if anyone hacked this up yet… 😸

Userlevel 7
Badge +3

@Tristan_Ramberg

Hi Tristan,

In short - yes, it can be done.

Long answer - not worth it. It would take a lot of custom development that I don’t think it’s justifiable. Plus, you’ll end up with a weird looking page at certain display resolutions since you’ll be adjusting the text but not any of the other elements on the page.

I would look into your page analytics and see what’s the “average” display size visiting the page. If it’s predominantly above 1280, you are fine.

If it’s below that, I would adjust my design to fit somewhere between 940-980px on desktop devices.

Based on my experience and that’s of course industry/visitor specific, the average display resolution has been going up. More traffic is coming from mobile devices but those that do use desktops tend to have larger displays.

Just my 2c.

Best,
Hristian

Let’s say I had a very simple splash page with only a section or two of text centered over a solid color background. Headline and body text. But I still want to keep 1280 as my page width and the max width I want for the text is 1110. How would I go about making the text responsive?

I’m sure for a more complicated page with lots of different elements it would be a problem, but I still need to do my due diligence to make sure what the limits are of what we can do with Unbounce. I’m more than willing to get into advanced details.

Userlevel 7
Badge +3

Even a “simple” page is not that simple to adjust because you have a bunch of hard coded values that you need to account for in your manual adjustments.

One way to do it is with a media query.

However, like I said initially, this would turn out to be more trouble than it’s worth.

Best,
Hristian

Reply