Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review

file Intelligent sizing for cross-platform support

More
10 years 7 months ago #3574 by lazerpld
Intelligent sizing for cross-platform support was created by lazerpld
Dear Simplifyyourweb.com,

I am writing as a happy buyer of your Trombinoscope component.

I though have a problem related to how the contacts are shown when moving across different platform.
Mainly beeing a full size computer screen and then a mobile phone like the iPhone.

I would like the following to happen, depending on what platform the page is shown on.
When i am on a computer with a big screen, i want the contacts to be listed in two columns. But when i go to my mobile phone, i would like them to be shown in only one column, as there is no space for showing them in two.

How could i accomplish this?
As i figure now, i can only go with 45% width, which will look awfull on the mobile phone, or i could set a minumum and maximum width, making the contacts show in only one column.

Please help for a solution. Many thanks in advance!

Please Log in or Create an account to join the conversation.

More
10 years 7 months ago #3575 by admin
Replied by admin on topic Intelligent sizing for cross-platform support
Hello,

yes, there is a solution to your problem and it is already built-in into the component. You need to give the cards a flexible size (in %) and set the 'min card width' and 'max card width' parameters. The component will resize the cards automatically.

For instance, by setting the cards to 45%, you will get 2 cards on a desktop view that cannot be bigger than the max card width. But then, on smaller screens, the cards may take 100% of the container because they would not get smaller than the minimum width you would have setup.
Olivier.

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago #3621 by lazerpld
Replied by lazerpld on topic Intelligent sizing for cross-platform support
Hi Olivier,

It helped me alot for the resizing on computer browsers, and also for ipads.
But I am still struggling alot to get it to work on an iPhone in vertical mode. The labels simply get cut off on the screen.

Would it be possible to make it work, so that when its on an iphone it would move the picture to the top i stead of left, so that the text can fit on the iPhone screen.

So it would work like this:

Going from a computer/ipad screen, the pictures are placed left on the lable. But when sizing down to the iphone screen in vertical mode, the picture would be moved to the top in stead of left, leaving for space for the contact details...

Please Log in or Create an account to join the conversation.

More
10 years 6 months ago - 10 years 6 months ago #3623 by admin
Replied by admin on topic Intelligent sizing for cross-platform support
This is something that should probably be done at the template level, this is where everything happens in terms of checking platforms. Some templates, like the commercial ones available on this website, give the possibility to make a module show or not depending on the platform. So that would be to create 2 instances of the same module, one for the iPhone, one for the rest (the iPhone version would be setup with the picture on top).
Olivier.
Last edit: 10 years 6 months ago by admin.

Please Log in or Create an account to join the conversation.