Hello!

Unfortunatelly there isn't an easy way to do it, Columns need 3 parts to work properly:

• The Columns Block
• The CSS
• The Columns Break static entity

To create that behavior, you'll need to clone those parts and change them manually to accept a new configuration. Doing this on Silk UI Web would result in a breaking change, so we're not expecting it in short term.

However, you can override the CSS to always have the same break behavior in Tablet Portrait, this would be easier and not require any changes to Silk, this can be made in the application only, by using the .tablet.portrait selector.

My regards

Okay, so just in case anyone has a similar need,

I wanted my theme to look the same as a phone-landscape when viewed in a tablet in portrait mode.

Since it seems there is no alternative but doing some hacking, instead of creating dozens of new/conflicting CSS classes, I created a small JavaScript that should do it.

Just add the code below to the "JavaScript" parameter (not as an expression!) of the layout webblock or any other webblock that is reused in all pages.

The obvious downside is that it works just for the client-side. This has no effect over server-side device detection (e.g. IsTablet() / IsPhone() functions). Webblocks that use those server-side functions might not work as expected (e.g. DisplayOnDevice), too.

SyntaxEditor Code Snippet

// Modify Silk UI device detector -- treat tablet portrait as phone landscape
if ( SilkDeviceDetect ) {
    var baseGetOrientation = SilkDeviceDetect.getOrientation;
    var baseGetDevice = SilkDeviceDetect.getDevice;
    var baseFnToggle = false;
    
    SilkDeviceDetect.getOrientation = function() {
        var baseOrientation = baseGetOrientation.call( SilkDeviceDetect );
        
        if ( baseFnToggle ) {
            return baseOrientation;
        }
        else {
            baseFnToggle = true;
        }
        
        var baseDevice = baseGetDevice.call( SilkDeviceDetect );
        
        if ( baseDevice == "tablet" && baseOrientation == "portrait" ) {
            baseFnToggle = false;
            return "landscape";
        }
        else {
            baseFnToggle = false;
            return baseOrientation;
        }
    };
    
    SilkDeviceDetect.getDevice = function() {
        var baseDevice = baseGetDevice.call( SilkDeviceDetect );
        
        if ( baseFnToggle ) {
            return baseDevice;
        }
        else {
            baseFnToggle = true;
        }
        
        var baseOrientation = baseGetOrientation.call( SilkDeviceDetect );
        
        if ( baseDevice == "tablet" && baseOrientation == "portrait" ) {
            baseFnToggle = false;
            return "phone";
        }
        else {
            baseFnToggle = false;
            return baseDevice;
        }
    };
    
    // Refresh device/orientation during window resizing
    function onResize() {
        
        // Do nothing if simulating
        if ( SilkDeviceDetect.isDeviceSimulation() ) {
            return;
        }
        
        var page = $( ".Page" );
        page.removeClass( "desktop small hd big tablet phone landscape portrait" );
        page.addClass( SilkDeviceDetect.getDevice() );
        page.addClass( SilkDeviceDetect.getOrientation() );
    }
    if ( window.addEventListener ) {
        window.addEventListener( "resize", onResize, false );
    }
    else if ( window.attachEvent ) { // IE 8 and addEventListener not supported browsers
        window.attachEvent( "onresize", onResize );
    }
}