I am creating a flex responsive layout.
I have a navigation bar on the left in the desktop version which becomes a top navigation bar on mobile (using media-query)
flex-direction: row;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: column;
}
That's great, but I want all of its sub-elements to have flex-direction of column (if parent had flex-direction of row), and vice versa... and that continues for about 3-4 depth, with each layer alternating in comparison to its parent (that means that it is going to look like: col -> row -> col -> row or row->col->row->col).
Any easy way of doing this without continuing to media-query all the way to the 4th depth elements?
I did try using variables (I work with SASS), but it seems those variables only get rendered once, and are not "reactive".
I am aiming towards a css/scss solution only btw.
Thanks
If you know you want the direct child to be the opposite of your parent you can style the direct child with the same media query.
this would get ALL .row > .col
assuming markup like:
HTML
<div class="row">
<div class="col"></div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
SCSS
.row {
flex-direction: row;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: column;
}
& > .col {
flex-direction: column;
#media (min-width: 600px) and (orientation:landscape) {
flex-direction: row;
}
}
}
If you need to target the highest .row you would need a top-level modifier class or a parent class above .row, e.g. class="row row--top" or .parent-class > .row
Related
How can I make the items inside the container responsive? The container can have at most 3 items, and the number of items are not known ahead. By responsive, I mean the item width is changed with the container div when resizing and I am thinking maybe item width is a percentage value. Besides, the item width has a max-width. Is it achievable by simply css?
<div class="container">
<div *ngFor="let item of items, let i=index" class="item">
{{item}}
</div>
</div>
.container {
display: flex;
}
.item {
//width: 33.3%; I was thinking something like this, but when there is only
// one item, the item width will become very small
max-width: 180px;
}
Use flexbox very simple
div{
display:flex;
}
span{
flex:1;
height:50px;
border:1px solid green;
}
#media screen and (max-width: 767px){
div{
flex-direction:column
}
}
<div>
<span></span>
</div>
<div>
<span></span>
<span></span>
</div>
<div>
<span></span>
<span></span>
<span></span>
</div>
Your CSS should be
.container {
display: flex;
flex-direction: column;
}
#media (min-width: 768px) {
.container {
flex-direction: row;
}
}
And in your template you should set the style to
<div class="container">
<div *ngFor="let item of items, let i=index" class="item" style="flex-basis: {{100 / items.length}}%">
{{item}}
</div>
</div>
But this is not resizable yet. If you want to achieve that, you need javascript.
Trying to put a sidebar on top of content text for small screens.
What I tried did not work.
#media(max-width: 820px) {
.head {
display: -webkit-box;
}
.text > .sidebar {
-ms-flex-order: 1;
}
<div class='container'>
<div class='head'>
<aside class='sidebar'>
</aside>
</div>
using flex you can change the flex-direction to column then change the order of the flex items as needed.
you can also use grid in combination with grid-template-areas to set and rearrange the order of grid cells as you see fit. for example, in conjunction with #media
...
grid-template-areas:
"content"
"header";
...
#media (max-width: 500px) {
...
grid-template-areas:
"header"
"content";
...
}
You have a number of problems:
An erroneous <body> tag (simply remove this).
A selector (.text > .sidebar) that will never match the target element.You don't actually need any styling on .sidebar, so I also just removed this.
A logical error -- .head contains no order; I assume you want this below .sidebar in the mobile view, meaning it is .head that would need order: 2 (not .sidebar).
Once all of these are corrected, you simply need to give .container display: flex and flex-direction: column, and the swap will work as expected.
This can be seen in the following (simplified) example:
#media(max-width: 820px) {
.container {
display: flex;
flex-direction: column;
}
.head {
order: 2;
}
}
<div class='container'>
<div class='head'>
<div class="text">
TeXt
</div>
</div>
<aside class='sidebar'>
wordS
</aside>
</div>
How can I change the stack order of columns on mobile or tablet?
For example, the code below shows elements horizontally on wide screens, but when it's shrinked I want 2 to be on top. I don't want to change the html structure to do it.
The example is below:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
As of the current bulma version v0.3.1, there is no feature
for the changing the order of columns.
However, you can define custom styles to change the order for mobile, tablet or whatever resolution that you want.
You can define a custom class .reverse-columns for example and add it on parent with following styles:
#media(max-width: 767px) { /* <== You can change this break point as per your needs */
.reverse-columns {
flex-direction: column-reverse;
display: flex;
}
}
#import url("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css");
#media(max-width: 767px) {
.custom-columns {
flex-direction: column-reverse;
display: flex;
}
}
<div class="columns custom-columns">
<div class="column box">
1
</div>
<div class="column box">
2
</div>
</div>
#media(max-width: $desktop) {
.columns.is-reversed-touch {
flex-direction: column-reverse;
display: flex;
}
}
#media(max-width: $tablet) {
.columns.is-reversed-mobile {
flex-direction: column-reverse;
display: flex;
}
}
You can always add more rules for widescreen etc., but this is what you usually need.
flex-direction: row-reverse; is what I would use for .columns.is-mobile.is-reversed-mobile. So you can add that rule too.
I am trying to change the order of two divs in a container when they get to mobile size.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
</div>
Is this possible to change it so that it will change to
<div class="container">
<div class="div2"></div>
<div class="div1"></div>
</div>
Depending on which browsers you need to support, you can use flexbox to switch the order of the divs.
.container {
display: flex;
}
.div1 {
order: 0;
}
#media screen and (min-width: 780px) {
.div1 {
order: 1;
}
}
JS Fiddle
You can do it using flexbox by reversing the order.
.container {
display: flex; /* or inline-flex */
flex-direction: column;
}
#media(min-width:768px){
.container {
flex-direction: column-reverse;
}
}
http://codepen.io/partypete25/pen/oxJNqz
You can use pure css to do that
.container{
display:table;
}
.div1{
display:table-footer-group;
}
.div2{
display:table-header-group;
}
make sure you put it in a #media query.
You can use two separate classes and make only one visible at a time depending on the media width.
First create you CSS
//This container is only visible on devices with 1025px or more such as iPad in landscape or portrait view
#media screen and (min-width: 1025px) {
.desktop-container {
Display:none;
}
}
// This container is only visible on smaller devices with screen size 360px - 1024px
#media screen and (min-width:360px) and (max-width:1024px) {
.mobile-container {
Display:none;
}
}
Now create your markup...
<div class="desktop-container">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="mobile-container">
<div class="div2"></div>
<div class="div1"></div>
</div>
I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this:
<div class="row-fluid">
<div class="span4"></div>
<div class="span8"></div>
</div>
What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller?
With bootstrap 2.0.2 and up you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8 span12-tablet"></div>
</div>
(I interpreted 'smaller' with tablet and phone sizes, use your own definitions for other sizes)
.hidden-phone and .hidden-tablet hide the span4 for smaller screens.
To reclaim that space and re-span the span8, add this to your css:
#media (max-width: 979px) {
.span12-tablet {
width: 91.48936170212765% !important;
*width: 91.43617021276594% !important;
}
}
If you happen to be using less you can use bootstrap's grid mixins:
.span12-tablet {
#media (max-width: 979px) {
#grid > .fluid > .span(12) !important;
}
}
Using a media query with whatever min/max width set .span4 to display: none;
Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like this:
#media (min-width: 320px){
.span12,
.span8 {
width: 300px;
}
}
(That last bit of code is just an example, but there will be something like it in bootstraps scaffolding.)
Hope that helps :)
EDIT:
This could work, I tested it using dev tools on the bootstrap site and it seemed to work. Again, in a media query:
#media (min-width: 320px){
#special .span4 {
display: none;
}
#special .span8 {
float: none;
width: auto;
}
}
If using bootstrap 2.2.1 you can:
Change the html to:
<div class="row-fluid">
<div class="span4 hidden-phone hidden-tablet"></div>
<div class="span8"></div>
</div>
Now add this to your css overrides:
#media (min-width: 768px) and (max-width: 979px)
{
[class*="span"],
.row-fluid [class*="span"] {
display: block;
float: none;
width: 100%;
margin-left: 0;
}
}
This will also work for any other span widths you have specified in your html.
the effect of these changes makes all span widths 100% causing the iPad to always use 1 column fluid mode in portrait mode.
This would be the best option to keep it dynamic. In my example I have width set to 6 columns next to fluidGridColumnWidth
[class*="span"] {
width: 100%;
.row-fluid {
[class*="span"] {
width: (#fluidGridColumnWidth * 6) + (#fluidGridGutterWidth * (6 - 1)) - (.5 / #gridRowWidth * 100 * 1%);
float: left;
margin-left: #fluidGridGutterWidth;
&:first-child {
margin-left: 0;
}
}
}
}
Write Like this
in phone device this div will hide<div class="span4 hidden-phone"></div>
and this div will show <div class="span8 visible-phone"></div>
Update
Previous Answer for Bootstrap 2.3
Now bootstrap 3 come in market..
so i update my answer for new user → bootstrap3
in phone device this div will hide<div class="col-md-4 hidden-xs"></div>
and this div will show <div class="col-xs-4 visible-xs"></div>
TLDR: Use the 2nd code snippet
Bootstrap is a mobile first framework so I'll explain from the smallest screen-size up. The layout is always 12 columns wide regardless of breakpoints/screen-size.
Starting from the smallest breakpoint (xs - extra small), the span4 is hidden and the span8 takes all of the width (all 12 columns)
<div class="row-fluid">
<div class="span4 hidden-xs"></div>
<div class="span8 col-xs-12"></div>
</div>
We are not quite done yet as we haven't defined behavior when the next breakpoint up is hit (sm/small/screen width is over 767px), so we'll make span4 take a third of the width (12 columns/3 = 4 columns) and the span8 will take the rest of the width (12-4= 8 columns)
<div class="row-fluid">
<div class="span4 hidden-xs col-sm-4"></div>
<div class="span8 col-xs-12 col-sm-8"></div>
</div>
The above assumes you wanted the change to happen on the change between the xs - sm breakpoints.
Further reading:
If you wanted the change between sm-md (md = medium) then I might use the visible-md class which will show the span4 on breakpoints medium and up (>992px)
<div class="row-fluid">
<div class="span4 visible-md col-md-4"></div>
<div class="span8 col-xs-12 col-md-8"></div>
</div>
I came up with a small variation of that.
Add stack-tablet class to a row-fluid to make the spans stack on tablet width, not only on phone width (bootstrap default):
#media (max-width: 979px) {
.row-fluid.stack-tablet [class*="span"] {
width: 100%;
display: block;
float: none;
margin-left: 0;
}
}
Can be used together with the display- and hidden- classes.
just:
<div class="row-fluid">
<div class="span4 hidden-desktop"></div>
<div class="span8"></div>
</div>