Issue with Lead Profile UI on small screen.

[atwellpub]

@daprela

Will you take a pause on template development to evaluate the Lead Profile UI and make it friendlier to smaller screens (responsive overhaul)?

It's killing me personally, and I know many people have to work on small laptops. We need to step up our presentation on this front immediately now that we are getting a lot of fresh attention.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/31963233-issue-with-lead-profile-ui-on-small-screen?utm_campaign=plugin&utm_content=tracker%2F260752&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F260752&utm_medium=issues&utm_source=github).

[daprela]

Sure, should I work also on the page with the list of leads, or only on the profile page?

[daprela]

@atwellpub it should be done, please give it a look, I've tested the new code up to small phones and haven't found any problems

[atwellpub]

Looking better already.

I'm testing on a 1280 x 1024 monitor (left side monitor for me) and here are a few things:

• http://screencast.com/t/e3SEFnZq
• http://screencast.com/t/BlxNfhgv

And maybe on resolutions this size and below we hide the photo all together. It's a cramped resolution and doesn't work well unless I zoom out on my browser. But cause I do it does not mean others will.

One other thing. The quick buttons for the lead listing page do not handle well in the 1280 width either:

• http://screencast.com/t/Ae3gzDOWx

Please feel free to make whatever change you feel will improve the experience.

[daprela]

I also noticed that problem in the conversion path tab. The problem is that the elements are inside span tags that don't have any classes, so they are hard to target.

As for the last screencast, are you sure that it is a 1280 width? I've tested it and I start seeing problems starting from a width of 768 where it becomes a mess. But I cannot reproduce your situation in any screen width. Are you sure that you haven't setup your browser to zoom in automatically the pages? I've done that in my Chrome because I work with a full hd screen and some web pages are too small

[daprela]

The buttons in the leads overview should be fixed now, please test them on your end. Bless the new flexbox element that is a real problem solver

[atwellpub]

Incredible!

Thank you Giulio. The buttons on the lead list page are sitting well for a small screen now.

It's late here and my targeting isnt' good, but from my searches maybe around here?:
https://github.com/inboundnow/leads/blob/master/classes/class.metaboxes.wp-lead.php#L1466

[atwellpub]

My monitor is whaky, but it's a standardized monitor. I'm not sure what to think. I'm glad your attention shoared it up.

[daprela]

The conversion path tab was hard to convert. I had to change a lot in the html and the css but I think that the final result is worth the effort. Please check it out and let me know if you find any flaws, on my system the behavior is fluid and adapt to any screen size

[atwellpub]

Conversion tab path looks a whole lot better. The UI itself could still use work. For example smaller fonts for smaller resolutions but at least there is no overlapping and that makes it feel a whole lot better.

[DavidWells]

CSS Flexbox will solve a number of these issues

With new flexbox CSS syntax, it can handle these layout issues and
automatically keep things in a row or a column.

See: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
and the demo
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

On Fri, Mar 18, 2016 at 11:50 AM, Hudson Atwell notifications@github.com
wrote:

Conversion tab path looks a whole lot better. The UI itself could still
use work. For example smaller fonts for smaller resolutions but at least
there is no overlapping and that makes it feel a whole lot better.

https://camo.githubusercontent.com/1024d65304c13501947405668871a9b272b3effe/687474703a2f2f636f6e74656e742e73637265656e636173742e636f6d2f75736572732f6164626f782f666f6c646572732f4a696e672f6d656469612f63653336643765652d353432642d346561642d393764302d3233313635636665316533362f323031362d30332d31385f313335302e706e67

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#169 (comment)

[atwellpub]

Used Flexbox to build a landing page template recently. I like it.