CODEWITHSUNDEEP
cssmobileresponsive-designflexboxdesktop
Sam
Sam

Reputation: 15506

Minimalistic Clean Responsive Layout in CSS3 Flexbox: Desktop <> Mobile toggle

I am trying to achieve a simple clean minimalistic responsive layout in CSS3 Flex, where:

A) in the desktop mode the body contains three vertical elements side by side "all in one row", and;
B) an alternative vertical oriented mobile version mode where the body contains the elements as rows on top of eachother, "all in one column".

But my code is broken somewhere as I dont see the mobile version kicking in when resizing the the window to narrow vertical orientation. What am I missing?

*{
	     margin: 0;
	    padding: 0;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}

body {
         display: flex;
         min-height: 100vh;
         flex-direction: row;
         flex: 1;
         background: yellow;
}

main {
	flex: 2;
	background: tomato;
}

nav {
	flex: 1;
	background: tan;
}

aside {
	flex:1;
	background: thistle;
}


/* FOR MOBILE PHONES */
@media only screen and (orientation: vertical) and (max-width: 768px) {	

	body{
		flex-direction: column;
	}

	main {
		background: crimson; /* test to see if mobile mode is activated */
	}
}
<body>
    <main>content</main>
    <nav>nav</nav>
    <aside>aside</aside>
</body>

Upvotes: 0

Views: 115

Answers (1)

vals
vals

Reputation: 64164

orientation: can be portrait or landscape:

body {
  display: flex;
  min-height: 100vh;
  flex-direction: row;
  flex: 1;
  background: yellow;
}

main {
  flex: 2;
  background: tomato;
}

nav {
  flex: 1;
  background: tan;
}

aside {
  flex: 1;
  background: thistle;
}


/* FOR MOBILE PHONES */

@media only screen and (orientation: portrait) {
  body {
    flex-direction: column;
  }
  main {
    background: crimson;
  }
}
<body>
  <main>content</main>
  <nav>nav</nav>
  <aside>aside</aside>
</body>

Upvotes: 2

Related Questions