portrait and snapped view styling

Question

 I'm trying to design a simple app using Blend. I have created a simple grid for landscape view and it looks good. Now I'm changing css file for snapped view and portrait view through

@media 

screen and (-ms-view-state: portrait)     and @media  screen and (-ms-view-state: snapped)                                                 I cannot see any difference in the output or even in the art board of the Blend. In style rules tab or project window of Blend, the orange-yellow line is set on portrait view line. In device tab portrait view is selected. Although art-board shows device in portrait mode, my css changes are not reflected there. I have changed/re-typed my css rules 3 times, refresh the page again and again but I can't see any difference in either css properties pane, or in art-board or in simulator output. What am I missing?

Answer 1

Use -ms-view-state: fullscreen-portrait instead of just portrait. The latter only works with the orientation: query, which applies to aspect ratios and not view states.

To be specific, here are the four media queries for view states (as you get in CSS with the Blank app template):

@media screen and (-ms-view-state: fullscreen-landscape) {
}

@media screen and (-ms-view-state: filled) {
}

@media screen and (-ms-view-state: snapped) {
}

@media screen and (-ms-view-state: fullscreen-portrait) {
}

Kraig

Author, Programming Windows 8 Apps with HTML, CSS, and JavaScript, a free ebook from Microsoft Press

Answer 2

Hi Kraig,

Thank you very much for the answer. I'm still trying to make it work. I'm using navigation template. In home.css, I defined all CSS rules as you've shown in first/second chapter of your free ebook. (I love it, it's great.. Thank you very much for it too..) These CSS rules are outside any of these four media queries, in the beginning of home.css. Then I changed columns and rows in snapped and portrait view, but still can't see any difference. Working on it for many days now..

After some time and more editing, your solution worked perfectly. Great.. thanks..

Answer 3

Can you paste in your CSS here?

Answer 4

As I edited my answer, it worked fine.  Here is my CSS code for that.

body {
	display: -ms-grid;
	-ms-grid-columns: 1fr;
	-ms-grid-rows: 1fr;
	background-color: #F9F0D5;
}
#section {
	display: -ms-grid;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	-ms-grid-rows: 1fr 20px;
	-ms-grid-columns: 1fr 20px 1fr 10px;
}
#calcDiv {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	display: -ms-grid;
	-ms-grid-rows: 1fr 10px 90px 50px 10px;
}
#savedUnits {
	-ms-grid-column: 3;
	-ms-grid-row: 1;
	display: -ms-grid;
	-ms-grid-rows: 1fr 10px 1fr;
}
#savedOutput1 {
	width: 100%;
	height: 100%;
	-ms-grid-row: 1;
}
#savedOutput2 {
	-ms-grid-row: 2;
	height: 100%;
	width: 100%;
}
.output {
	font-size: xx-large;
	font-weight: normal;
	color: #0E28DD;
	
}
#toLength {
	-ms-grid-row: 3;
	text-align: left;
	}
.styledSelect {
	width: 450px;
	height: 65px;
	font-size: xx-large;
	font-weight: bold;
	font-stretch: wider;
}
.labels {
	font-size: xx-large;
	font-weight: bold;
	color: #DB1834;
}
#header {
	display: -ms-grid;
	color: #1512E5;
	
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}
#mainContent {
	display: -ms-grid;
	-ms-grid-columns: 120px 1fr 40px;
	-ms-grid-rows: 128px 1fr 40px;
}
#calcForm {
	-ms-grid-row: 1;
}
#saveBtn {
	-ms-grid-row: 4;
	width: 180px;
	border-width: thick;
	border-color: #0B32ED;
	height: 70px;
	font-size: xx-large;
	font-weight: bold;
	
}
#titlearea {
	-ms-grid-column: 2;
	-ms-grid-row: 1;
	margin-top: 10px;
	font-weight: bold;
	}
@media screen and (-ms-view-state: snapped) {
	
  #mainContent {
	display: -ms-grid;
	-ms-grid-columns: 20px 1fr 40px;
	-ms-grid-rows: 100px 1fr 40px;
	}  
	#section {
	display: -ms-grid;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	-ms-grid-columns: 1fr;
	-ms-grid-rows: 1fr 20px 1fr;
}
#calcDiv {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	display: -ms-grid;
	-ms-grid-rows: auto 10px auto 10px 40px 10px;
}
#toLength {
	-ms-grid-row: 3;
	text-align: left;
	}
	
	#calcForm {
	-ms-grid-row: 1;
}
	
	
#saveBtn {
	-ms-grid-row: 5;
	width: 180px;
	border-width: thick;
	border-color: #0B32ED;
	height: 70px;
	font-size: xx-large;
	font-weight: bold;
	}
#savedUnits {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	display: -ms-grid;
	-ms-grid-rows: 1fr 10px 1fr;
}
.styledSelect {
	width: 350px;
	height: 65px;
	font-size: xx-large;
	font-weight: bold;
	font-stretch: wider;
}
	
}
@media screen and (-ms-view-state: fullscreen-portrait) {
    #mainContent {
	display: -ms-grid;
	-ms-grid-columns: 50px 1fr 40px;
	-ms-grid-rows: 100px 1fr 40px;
}  
	#section {
	display: -ms-grid;
	-ms-grid-column: 2;
	-ms-grid-row: 2;
	-ms-grid-columns: 1fr;
	-ms-grid-rows: 1fr 50px 1fr;
	margin-top: 50px;
}
#calcDiv {
	-ms-grid-column: 1;
	-ms-grid-row: 1;
	display: -ms-grid;
	-ms-grid-rows: auto 10px auto 10px 40px 10px;
}
#toLength {
	-ms-grid-row: 3;
	text-align: left;
	}
	
	#calcForm {
	-ms-grid-row: 1;
}
	
	
#saveBtn {
	-ms-grid-row: 5;
	width: 180px;
	border-width: thick;
	border-color: #0B32ED;
	height: 70px;
	font-size: xx-large;
	font-weight: bold;
	}
#savedUnits {
	-ms-grid-column: 1;
	-ms-grid-row: 3;
	display: -ms-grid;
	-ms-grid-rows: 1fr 10px 1fr;
}
}

Answer 5

Glad to know it's working now.