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>
Related
.grid {
display: grid;
grid-template-columns: 80% 20%;
}
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item-special"></div>
<div class="grid-item-special"></div>
</div>
So far the above is straight forward, each row will contain two columns with respective widths of 80% and 20%
However I wish to adapt the above to make it responsive. On smaller screens any div with class "grid-item" will occupy 100% of the width (so each row will contain one column)
The above is not a problem, however further to the above I want any div with the class "grid item-special" to occupy 50% of the width.
The image shows what I am attempting to accomplish:
I need to avoid changing the html markup if possible.
Any ideas would be welcomed.
You can create media query and change grid on smaller screen
.grid {
display: grid;
grid-template-columns: 80% 20%;
text-align: center;
}
.grid-item, .grid-item-special{
border: 1px solid black;
}
#media (max-width: 400px) {
.grid {
grid-template-columns: auto;
}
.grid-item {
grid-column: span 2;
}
}
<div class="grid">
<div class="grid-item">11</div>
<div class="grid-item">11</div>
<div class="grid-item-special">22</div>
<div class="grid-item-special">22</div>
</div>
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
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 have a table with 3 cells per row one will be always empty and two filled they just will be alternating like info info empty ; empty info info . So I would want to get rid of the empty one in smaller resolutions and I am not sure if there is a way of doing that through media query or should I use JS.
HTML:
<div style="display: table;">
<div class="tr">
<div class="tc side"></div>
<div class="tc year">
2016
</div>
</div>
</div>
css:
.tr {
display: table-row;
}
.tc {
display: table-cell;
}
.side{
width: 45%;
}
.year{
text-align: center;
}
you can just use media query to set display:none to the element, provided that you can CSS select it
#media screen and (max-width: 767px) {
.tr > div.empty {
display: none;
}
}
this will set .tr > div.empty to hidden when screen width is smaller than 767px
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>