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
Related
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>
I have ASP.NET project.I want it to change its view automatically when device is detected as mobile or as desktop.what are the ways available?please suggest some example projects.And i tried studying many tutos.But still i am unable to grasp them.So can any body suggest step by step method to do so?
For making your webpage responsive as per device
--> first you need to have bootstrap in your project.
--> you will be having container in your bootstap.css file(assets-->css-->bootstap.css).
--> container will be having different kind of screen types declared by default.like
EXAMPLE:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
--> you have to use these container in your cs file.In asp.net it is .aspx extention file.for
EXAMPLE:
<div class="below-slideshow" style="padding-bottom: 0px">
<div class="container"> <!-- NOTICE HERE:inside div declare class as container/container-fluid-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div>
<h1 class="head-line">Dashboard</h1>
</div>
</div>
</div>
</div>
</div>
--> To know more about container and container fluid http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
HAPPY CODING :-)
Having a problem trying to get a repeating two-column layout in AngularJS. My dataset is a JSON object of image information. I want to show a two column layout of images. No matter what I tweak, something is wrong in my odd/even logic, but I can't seem to figure it out. What am I doing wrong?
.left {
float: left !important;
width: 50% !important;
}
.right {
float: right !important;
width: 50% !important;
}
.group:after {
content:"";
display: table;
clear: both;
}
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 480px) {
.left,
.right {
float: none;
width: auto;
}
}
<div ng-repeat="issue in issues">
<div ng-if="$even" class="group">
<div class="left" ng-if="$even">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
<div class="right" ng-if="$odd">
<img src="{{ issue.image }}" ng-src="{{ issue.image }}">
</div>
</div>
</div>
The issue with code is you had wrap your logic inside
<div ng-if="$even" class="group">
Div which is restricting to show odd logic div.
instead of having two different div, I'd say use ngClassEven & ngClassOdd directive. Also remove the wrapper div which has ng-if="$even" condition.
<div ng-repeat="issue in issues">
<div ng-class-even="'left'" ng-class-odd="'right'">
<img ng-src="{{ issue.image }}">
</div>
</div>
I guess you already got your answer, but still here are some alternatives which may prove useful:
Simply ng-class - it's a little more flexible, so you may find it useful in other cases too. In this case:
<div ng-repeat="issue in issues" ng-class="{left: $even, right: $odd}">
<img ng-src="{{ issue.image }}">
</div>
or
<div ng-repeat="issue in issues" ng-class="$even ? 'left' : 'right'">
<img ng-src="{{ issue.image }}">
</div>
Note that unlike some other properties ng-class can coexist with class in harmony so you could also add class="item" or something similar.
Since it's a styling issue you may want to try to solve it in css. As long as you think IE 6-8 should die you can use the nth-child selector:
:nth-child(odd) { ... }
:nth-child(event) { ... }
Also since both my and Pankaj's answers removed your group class here is some simpler css which you could use instead:
.item {
float: left;
width: 50%;
}
.left {
clear: left;
}
#media screen and (max-width: 480px) {
.item {
float: none;
width: auto;
}
}
Or again if you're not all about IE you could use flexbox (which removes the need for any JS):
.parent {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 0 0 50%;
}
#media screen and (max-width: 480px) {
.item {
flex-basis: 100%;
}
}
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>