Highlighted

Responsive flexbox columns - equal/unequal width/height

Community Beginner ,
Jan 14, 2020

Copy link to clipboard

Copied

Hello all

 

We're using flexbox to build two web pages both featuring a main two column layout that need to be responsive so when viewed on a mobile the right hand column moves underneath the left hand one – the first page needs two columns of equal width and height on it, the second needs two columns where the left hand column is about 60% of the width, right hand column 40%, and both columns are equal in height?

 

Any help much appreciated!

 

First page (code example):

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.page-wrapper > * {
background-color: #f2f2f2;
width: 48%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html>

 

 

 

Second page (code example): Nothing much changed, apart from a couple of css styles:

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.main-content  {
background-color: #f2f2f2;
width: 59%;
}
.sidebar-content  {
background-color: #f2f2f2;
width: 39%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html> 

 

 

 

TOPICS
Browser, Code, How to, Other

Views

460

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive flexbox columns - equal/unequal width/height

Community Beginner ,
Jan 14, 2020

Copy link to clipboard

Copied

Hello all

 

We're using flexbox to build two web pages both featuring a main two column layout that need to be responsive so when viewed on a mobile the right hand column moves underneath the left hand one – the first page needs two columns of equal width and height on it, the second needs two columns where the left hand column is about 60% of the width, right hand column 40%, and both columns are equal in height?

 

Any help much appreciated!

 

First page (code example):

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.page-wrapper > * {
background-color: #f2f2f2;
width: 48%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html>

 

 

 

Second page (code example): Nothing much changed, apart from a couple of css styles:

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.main-content  {
background-color: #f2f2f2;
width: 59%;
}
.sidebar-content  {
background-color: #f2f2f2;
width: 39%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html> 

 

 

 

TOPICS
Browser, Code, How to, Other

Views

461

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 14, 2020 0
LEGEND ,
Jan 14, 2020

Copy link to clipboard

Copied

 

First page (code example):

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.page-wrapper > * {
background-color: #f2f2f2;
width: 48%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html>

 

 

 

Second page (code example): Nothing much changed, apart from a couple of css styles:

 

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Flex Layout</title>
 <style>
body {
margin: 0;
}
.page-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 90%;
margin: 0 auto;
height: 100vh
}
.main-content  {
background-color: #f2f2f2;
width: 59%;
}
.sidebar-content  {
background-color: #f2f2f2;
width: 39%;
}
@media screen and (max-width: 768px) {
.page-wrapper > * {
flex-basis: 100%;
}
}
</style>
 </head>
 <body>
 <div class="page-wrapper">
<main class="main-content">
<h3>Main content goes here</h3>
</main>
<!-- end main-content -->
<aside class="sidebar-content">
<h3>Sidebar content goes here</h3>
</aside>
<!-- end sidebar-content -->
 </div>
 <!-- end page-wrapper -->
 </body>
 </html> 

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2020 2
Community Beginner ,
Jan 14, 2020

Copy link to clipboard

Copied

Great stuff! Thanks very much!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 14, 2020 0