Forums (Obsolete)

Old Forums

Portal Engine Questions on portal engine and web parts.

Version 7.x > Portal Engine > Help! My device layouts aren't working!

View modes:

Member

Jon White - 1/12/2014 3:54:09 PM

Help! My device layouts aren't working!

Hi There,

I've just started to implement device layouts.

I have two that need to change based on screen width: Max-screen width of 768px for tablets and min-screen width of 768px for desktop.

I have enabled device layouts, created varying layouts for each but none of them work.

They do seem to work in the kentico device preview though but just not in the 'real world'.

It's like there's a problem with device detection as it just loads one template.

The macro i'm inputting in the settings>device layouts is:

CurrentDevice.ScreenPixelsWidth <= 768

But this doesn't change anything.

Can anyone advise where i'm going wrong? I'm using media queries and they work fine but the layouts on this just don't change on devices or browser size.

Thank you


Member	Jon White - 1/12/2014 4:31:00 PM RE:Help! My device layouts aren't working! Okay well this seems to work when the macro is: CurrentDevice.IsMobile \|\| CurrentDevice.IsTablet But i want it based on screen size to match my css. It's like the macro above: CurrentDevice.ScreenPixelsWidth <= 768 doesn't work, or have i entered it wrong? Thanks

Certified Developer 13

kentico-jx2tech - 1/12/2014 8:02:28 PM

RE:Help! My device layouts aren't working!

I believe that the CurrentDevice.ScreenPixelsWidth is returning the device width, rather than the viewport width. Using that property like a media query expression might not produce the desired result. For example, 51degrees returns a default 640 for ScreenPixelsWidth if the device is not detected, like a desktop browser.

Member

Jon White - 1/13/2014 4:26:33 AM

RE:Help! My device layouts aren't working!

Hmmm, i did try it on small devices and it didn't seem to affect the templates, so I wasn't convinced the macro was working.

I was hoping for a media query like expression really.

For now i'm using 'is mobile' and 'is tablet' and that works but it's not really what i wanted and kinda wanted to test in browser which won't work now.

Thank you for your help.

Top