i have this HTML
<div class="flex-container">
<div class="flex-full">1</div>
</div>
<div class="flex-container">
<div class="flex">2</div>
<div class="flex">3</div>
<div class="flex">4</div>
</div>
Styled by this CSS
*{
margin:0;
padding:0;
}
.flex-container{
width: 90%;
max-width: 960px;
display: flex;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.flex-full{
background-color: red;
flex: 1 0 100%;
}
.flex{
background-color: blue;
flex: 1 0 90px;
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
But the result is not as intended. i will try to give a visual presentation of the problem(upload image wont work):
On screen width 320px and below, i get the following result
111111111111111
222222233333333
444444444444444
What i expected was:
phone screen bigger screen
111111111111111 111111111111111111
222222222222222 222222333333444444
333333333333333
444444444444444
I hope it made sence, please help me out :)
JSFiddle
Are you maybe looking for flex-direction: column;?
on .flex-container.
In Flex, you may use justify-content and align-content for horizontal and vertical alignment, respectively.
Also flex-basis takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.
.flex-container {
flex-direction: row;
justify-content: space-between;
align-content: space-between;
}
.flex1, .flex4{
flex-basis: 100%;
}
.flex2, .flex3{
flex-basis: 50%;
}
#media screen and (max-width: 320px){
.flex2, .flex3{
flex-basis: 100%;
}
}
You may also use width: 100% and width: 50% instead if flex-basis.
Related
I've been trying to achieve the layout below using flexbox. I originally had a left hand sidebar containing the image & navigation, and a main content area. On mobile, the sidebar used to wrap under the main content.
The problem with that is that I need the image to remain at the top on mobile, so I've been trying with three sibling divs in one wrapper div.
Is this even possible with flexbox or will I need to use css grid?
Although CSS Grid would be the best approach to achieve the lay-out you want, it is possible using CSS Flexbox.
You just have to create a wrapper div with three divs inside (when doing a mobile first approach) and with .content set to flex: 1 to stretch out the height of your viewport.
Then for desktop (in this case #media screen and (min-width: 1000px)), change the order (MDN reference of order) of .navigation and .content and give all three divs appropriate widths according to their needs. The only change to div.wrapper is that it needs flex-flow: column wrap to wrap correctly.
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
min-height: 100%;
}
.box {
display: flex;
}
.content {
flex: 1;
}
#media screen and (min-width: 1000px) {
.wrapper {
flex-flow: column wrap;
}
.navigation {
order: 2;
}
.content {
order: 3;
}
.image,
.navigation {
width: 200px;
flex: 50%;
}
.content {
width: calc(100% - 200px);
flex: 0 0 100%;
}
}
/* Generic styling */
html,
body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.image {
background: orange;
height: 60px;
}
.content {
background: lightblue;
}
.navigation {
background: lightgreen;
height: 60px;
}
<div class="wrapper">
<div class="box image">Image</div>
<div class="box content">Content</div>
<div class="box navigation">Navigation</div>
</div>
First off I am very new to CSS and following an online course.
I am trying to create a navigation bar that changes from row to column when going into mobile. I am using flexbox and #media queries for that however, it seems like my code does not make any change to the navigation direction when going to mobile. Please help! ]
.container {
display: flex;
color: white;
justify-content: flex-end;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: row;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
Can't say exactly what problems you are having without seeing some example HTML to work with but at first glance it seems you should be using flex-direction:column for your mobile view.
Note well: What is in the media query is your mobile styles in this case. You can tell because you have specified max-width which means that it will apply to all screen sizes below the width provided (600px).
See the below as an example which incorporates your provided CSS with some basic HTML I made. (Resize the browser window to test).
.container {
display: flex;
color: white;
}
.box {
width: 90px;
height: 3rem;
margin: 0.5rem;
background-color: black;
text-align: center;
}
.box-four {
width: 100px;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column;
justify-content: center;
flex-grow: 2rem;
flex-wrap: wrap;
flex-basis: 10%;
}
}
<div class="container">
<div class="box">Entry 1</div>
<div class="box">Entry 2</div>
<div class="box">Entry 3</div>
<div class="box">Entry 4</div>
</div>
You can also read more about flex-direction at the MDN Web Docs
I am using the recommended approach from this question https://stackoverflow.com/a/468080/2981429 and have two divs:
#left-pane {
float: "left";
width: "300px";
}
#right-pane {
margin-left: "300px";
}
the left pane takes up a fixed 300px width and the right pane always takes up 100% of the remaining space.
I want to add a "minimum width" to the right pane. When it gets below a width of around 300px I want to move it below the left pane.
When I try actually adding min_width: 300px to the right pane, it just extend invisibly past the boundaries of the page - it doesn't seem to be able to get below the floated left pane.
Codepen
You can use flexbox for your layout.
You can find a good point to start on MDN.
When you use a small device, you can use a media-query to get the divs on column.
For example:
#media (max-width: 600px) {
.container{
flex-direction:column;
}
#left,#right{
flex: 0 1 100%;/* set the width to 100% for the 2 columns */
}
}
.container{
display:flex;
}
#left {
flex:0 1 300px;
height: 300px;
background-color: blue;
}
#right {
flex:1 1 auto;
height: 300px;
background-color: darkred;
}
<div class="container">
<div id='left'></div>
<div id='right'></div>
</div>
that is not a float job. you need flex for this instance.
.container {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
#left-pane {
width: 300px;
min-width: 300px;
}
#media only screen and (max-width: 300px) {
.container {
flex-flow: column;
}
}
using flex gives you a lot of new layout and responsive options, you can read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
}
#left {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
#right {
height: 300px;
background-color: darkred;
width: calc(100% - 300px);
}
#media (max-width: 600px) {
.parent {
flex-direction: column;
}
#left,
#right {
width: 100%;
}
}
<div class="parent">
<div id='left'></div>
<div id='right'></div>
</div>
I have two DIV's, first one is auto width (the content), second one is fixed width.
When the screen gets too narrow/window scaled, the fixed width DIV goes on the top and becomes 100% width as well. I would like to replicate this, but I want the fixed DIV to go on the bottom, not top, when browser gets too narrow. How can I accomplish this? Thanks.
(Please check in 'Full-Page' mode)
.container-wrapper
{
overflow: hidden;
}
.fixed-right
{
overflow: hidden;
min-height: 100px;
min-width: 400px;
float: right;
}
.auto-left
{
overflow: hidden;
min-height: 100px;
}
.fancy
{
border-radius: 2px;
background-color:lightgray;
margin-left: 5px;
padding: 5px;
}
#media
only screen and (max-width: 764px), (min-device-width: 764px) and (max-device-width: 1024px)
{
.fixed-right
{
float: none;
width: auto;
margin-left: 0px;
margin-bottom: 5px;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
Try adding this into your #media-query;
.container-wrapper {
display: flex;
flex-direction: column-reverse;
}
Pretty easy, change the order of the Divs in the HTML DOM:
<div class="container-wrapper">
<div class="auto-left fancy">
Auto
</div>
<div class='fixed-right fancy'>
Fixed
</div>
</div>
The float right, will make it as you wanted on desktop
You can use display: flex; on your wrapper. Switch the flex-direction in the two different viewports. Note this solution becomes more flexible if you add more elements to the wrapper, being able to set the order.
Then define the order of the divs.
in the large view you set the right div to order 1
in smaller you set it to 0, that means it will be first (on top)
.container-wrapper {
display: flex;
flex-direction: row;
}
.fixed-right {
overflow: hidden;
min-height: 100px;
min-width: 400px;
order: 1;
}
.auto-left {
overflow: hidden;
min-height: 100px;
}
.fancy {
border-radius: 2px;
background-color: lightgray;
margin-left: 5px;
padding: 5px;
}
#media only screen and (max-width: 764px),
(min-device-width: 764px) and (max-device-width: 1024px) {
.container-wrapper {
flex-direction: column;
}
.fixed-right {
width: auto;
margin-left: 0px;
margin-bottom: 5px;
order: 0;
}
.fancy {
margin-left: 0;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
I have a 'card' like html component, that it displays this way:
+------+-----------------+-------+
| 1 | 2 | 3 |
+------+-----------------+-------+
And when I go under the 720px I want that became like this:
+------+-------------------------+
| | 2 |
| 1 +-------------------------+
| | 3 |
+------+-------------------------+
I am having difficulties to figure out how can I achieve this with flexbox. I am wondering if it is the right solution for this kind of problem.
the initial state, is currently like this:
<div class="card">
<div class="status"></div>
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
<div class="action"><button>go</div>
</div>
and my CSS something like this:
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
height: 24px;
}
.card .title {
flex-grow: 1;
}
You cannot achieve this with flexbox with your current HTML structure.
(In the future you can use the grid layout for this, but at the moment it is not supported.)
However, if you place 2 and 3 in a container you can do this:
.card {
margin: 10px;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
padding: 9px 10px;
}
.card .avatar {
width: 30px;
height: 24px;
}
.card .container {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
}
.card .container .name {
width: 50%;
}
.card .container .presentation {
flex-grow: 1;
}
#media (max-width: 720px) {
.card .container .name {
width: 100%;
}
}
<div class="card">
<div class="avatar">
x
</div>
<div class="container">
<div class="name">Mr. Potato</div>
<div class="presentation">Hi!</div>
</div>
</div>
You can use CSS media query to apply a different style your div's at a certain screen size.
#media screen and (max-width: 720px) {
.css-class {
}
#css-id {
}
}
#ciaoben, Since you disappeared after asking you question, I'll provide an answer based upon the logic that the .title and .details blocks are meant to be blocks 2 and 3 from your diagram and that the .action is meant to be a fourth block on the opposite side.
Simply put, you need another layer for your HTML structure before you can apply the CSS to adjust it. You would wrap the blocks you want to have the appearance of altered in another DIV.
Once you have the HTML structure updated, it's a simple matter of applying a #media query to adjust the appearance at the desired screen size.
Please see my example below. Note: I updated your CSS to a more streamlined flexbox approach. Further, it applis display: flex to the .action block because, as I noted above, you don't identify it at all.
.card {
margin: 10px;
min-width: 320px;
min-height: 42px;
background-color: white;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 9px 10px;
}
.card .status {
width: 30px;
}
.card .stretchit, .card .action {
-webkit-flex: 1;
flex: 1;
}
#media screen and (min-width: 720px) {
.card .stretchit {
display: flex;
}
.card .title, .card .details {
-webkit-flex: 1;
flex: 1;
}
}
<div class="card">
<div class="status"></div>
<div class="stretchit">
<div class="title">Tryout.it</div>
<div class="details">156 emails</div>
</div>
<div class="action"><button>go</button></div>
</div>