I'm trying to set up SCSS media queries for my app. I've been somewhat successful on my initial efforts on the login screen, but have run into a problem: while my app loads correctly (i.e., the device correctly displays the styles on launch), when I rotate between portrait and landscape, the styles reset to defaults for all elements on the screen -- logo, input fields, text and button. I've tried just about every permutation of the cls and elements in defining the classes... the SCSS below shows only the most recent definitions.

I've read something about repainting the screen each time the screen needs to refresh... is this really necessary, or is it just my (poor) coding skills?

Thank you for any help! Disclaimer: I'm a UX guy, not a coder...

(Note that I'm intentionally only targeting specific devices as this is an enterprise app.)

The code:

Code:
Ext.define('theapp.view.Login', {    extend: 'Ext.form.Panel',
    alias: 'widget.login',


    alternateClassName: [
        'login'
    ],


    config: {
        centered: false,
        cls: 'login',
        fullscreen: true,
        id: 'login',
        itemId: 'login',
        padding: '0 5%',
        width: '100%',
        autoDestroy: false,
        layout: {
            pack: 'center',
            type: 'vbox'
        },
        modal: false,
        scrollable: 'vertical',
        items: [
            {
                xtype: 'image',
                cls: 'logo',
                minHeight: '70px',
                src: 'img/cb_logo.svg'
            },
            {
                xtype: 'container',
                height: '2em'
            },
            {
                xtype: 'textfield',
                centered: false,
                cls: 'login-field',
                id: 'loginUserName',
                name: 'user-id',
                placeHolder: 'User name'
            },
            {
                xtype: 'container',
                height: '1em'
            },
            {
                xtype: 'passwordfield',
                cls: 'login-field',
                id: 'loginPassword',
                name: 'password',
                placeHolder: 'Password'
            },
            {
                xtype: 'button',
                cls: 'signin',
                height: '2em',
                itemId: 'btnLogin',
                margin: '24 auto',
                ui: 'login',
                text: 'SIGN IN'
            },
            {
                xtype: 'container',
                margin: '0 auto 0 auto',
                maxWidth: '300px',
                items: [
                    {
                        xtype: 'button',
                        border: '0px',
                        centered: false,
                        cls: 'server-settings',
                        id: 'loginSettingsButton',
                        itemId: 'loginSettingsButton',
                        margin: 'auto',
                        style: 'text-decoration: underline',
                        ui: 'server',
                        width: 'auto',
                        text: 'ACCOUNT SETTINGS'
                    }
                ]
            },
            {
                xtype: 'label',
                centered: false,
                html: '    .',
                id: 'versionLabel'
Main SCSS styles:

Code:
.logo img {	vertical-align: middle;
	minHeight: 70px;
	minWidth: 280px;
	maxwidth: 280px;
}


.login {
	width: 100%;
}


.login-field .x-input-el {
	border: thin solid lighten($active-color, 25);
	border-radius: 6px;
	display:-webkit-box;
	-webkit-box-pack:center;
	-webkit-box-align:center;
}
Sample responsive code in an @import SCSS file:

Code:
/* Samsung Galaxy S4 (portrait) ----------- */


@media screen 
	and (-webkit-device-pixel-ratio: 3)
	and (device-width: 360px)
	and (device-height: 640px)
	and (orientation: portrait) { 
		body {
    		font-size: 12pt !important;
		}
		.x-slidenavigation-list.x-list {
			font-size: 12pt !important;
			line-height: 2em !important;
		}
		.logo {
			height: 90px !important;
		}
		 .login-field.x-field-input .login-field.x-input-el {
			maxwidth: 90% !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.signin {
			maxwidth: 90% !important;
		}
}




/* Samsung Galaxy S4 (landscape) ----------- */


@media screen 
	and (-webkit-device-pixel-ratio: 3)
	and (device-width: 640px)
	and (device-height: 360px)
	and (orientation: landscape) { 
		body {
    		font-size: 12pt !important;
		}
		.x-slidenavigation-list.x-list {
			font-size: 12pt !important;
			line-height: 2em !important;
		}
		.logo {
			height: 90px !important;
		}
		.login-field.x-field-input .login-field.x-input-el {
			maxwidth: 65% !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}
		.signin {
			maxwidth: 65% !important;
		}
}