Column pattern responsive

Column pattern responsive

  

Hello,

I'm using the column structure patterns from silkUI to control the behavior of responsivenes.
It came to my attention it is only working using the 'IsTablet or isPhone' to define when to brake.

Why isn't this working with window resize? It is ofcourse working in dev env. with the 'preview device functionallity' enabled. But once in production, the responsivenes doesn't work when the window resizes, only when accessing this via a phone or tablet..

How to fix this?



Greetings,


Niels

Hi Niels,

Since you're using SILK UI, can you check if you have the Device Emulation option enabled:

You should have the behavior you mentioned with it.

Cheers,

GM

Hi Martins,


I do know the device emulation, and as I was saying in my post, i'm already using it.

The issue is, when not using the device emulation tool, the responsiveness dissapears... While it shouldn't :/

Hello,

Does anyone resolve this issue? I encounter this too as well. Does anyone knows the fix on this?



Thanks,

Ruby

Ruby Jimenez wrote:

Hello,

Does anyone resolve this issue? I encounter this too as well. Does anyone knows the fix on this?



Thanks,

Ruby

Rewrite the whole theme/silkUI with mediaqueries.... (if using it)


Hello Niels,

You're misunderstand how Silk UI responsiveness works.

It works detecting the type of DEVICE your application is running in, and the patterns will behave accordingly this information. For example, Columns 2 may break in mobile devices. 

It has nothing to do with "resizing" of the window. 

If you wants to be responsive in terms of "resizing" of screen, you will use the same techniques every HTML/CSS application uses: Minimun widths, Flex, etc.

Cheers.

Hi Eduardo,

I think you misunderstood me. What you are saying is actually what i meant.
He tries to use the column strcture (i think) to get the same responsive behavior when resizing the windows. (in production)
I meant that if he want's this to happend he needs to write his own code/behavior to get the expected results, since SilkUI column structure is not using ex. media queries or that kind of resonsiveness.

I do ofc know SilkUI uses server side 'responsiveness' and detects the device the application is running on, regardless the window size.

The reason why i said 'whole silkUI theme' is bcs i didn't know if his question was only referring to the column structures or the whole silk UI theme.

Sorry Niels, my bad.

I was misleading by your initial question. :)

@Ruby, this is not a bug or a problem. This is how SilkUI works.

Hi Eduardo,

I also have this problem and I was thinking on using JS to check the size of the screen and depending on the size I could go to the div with class Page and change the class desktop to phone or tablet.

What's your thoughts about this?

Regards,

Marcelo

Hi Marcelo,

Don't know if this will work.
For some CSS, ok, but SilkUI uses Cookies to store information about the device it is in (If I am not wrong), and you would have, anyway, to call the server and refresh the entire screen.

When thinking "responsive" in therms of "window resize", I still prefer the standard approach working with minimum width to guarantwee things do not "overlap" and on some cases, using FLEX to be able to break columns on resize.

On very strct situations, a @media quety may be still required for example to adjust FONT size, depending on the different resolutions where the application is expected to run.

But all of this comes with costs. It's nice to the user, but to keep a resposive application may become expensive in therms of developing.

I try to ALWAYS use a "minimum width" for the page. Below this, let the browser add scrools...