why does this code make both divs appear on a landscape-oriented iPad?
/* CSS */
div{
display:none;
}
#media screen and (min-width: 48em) {
/* IPAD PORTRAIT */
body {
/* DARK BLUE */
background-color:#006;
}
div{
display:none;
}
#ipad-portrait{
display:block;
}
}
#media screen and (min-width: 64em) {
/* IPAD LANDSCAPE */
body{
/*bright green*/
background-color:#3f0;
}
/* an attempt to hide all divs before displaying
the one that says iPad landscape */
div{
display:none;
}
#ipad-landscape{
display:block;
}
}
<!-- HTML -->
<div id="ipad-landscape">
ipad landscape
</div>
<div id="ipad-portrait">
ipad portrait
</div>
Thanks!
Your min-widths overlap. A device that is a minimum of 64em wide is also a minimum of 48em wide. What you might be wanting is something like this:
#media screen and (min-width: 48em) and (max-width: 63.999em) {
/* stuff */
}
Related
I'm a little bit confused because I'm used to do some CSS using media queries... I never had this problem before. Only the first media query is working well... I have few media queries working on specifics sizes like this :
/* - IPAD LANDSCAPE - */
#media screen and (max-width: 1024px) and (orientation: landscape){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 24vw top 3.5vh, right 21vw top 1vh;
}
header object{
left:16vw;
width:18vw !important;
}
header p{
font-size:14px;
top:16vh;
left:-2vw;
}
}
/* - IPAD PORTRAIT - */
#media screen and (max-width: 768px) and (orientation: portrait){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 28vw top 3.5vh, right 17vw top 1vh;
}
header object{
left:10vw;
width:24vw !important;
}
header p{
font-size:20px;
top:10vh;
left:-2vw;
}
}
/* - PHONE LANDSCAPE - */
#media screen and (max-width: 750px) and (orientation: landscape){
/*...*/
}
/* - PHONE PORTRAIT - */
#media screen and (max-width: 450px) and (orientation: portrait){
/*...*/
}
I tried with and without the orientation parameter... I can't even figure out why my code isn't working well...
I watched few topics on this but it didn't help me...
Thanks for helping :-)
EDIT:
I'm using Bootstrap for the first time, does it change something on media queries ?
EDIT 2:
I saw something like #media screen and (max-width:screen-sm-max) when we use Bootstrap, should I use this instead of pxvalue ? I think it will still the same...
Try to put the smallest #media queries width block of code first.
/* - PHONE PORTRAIT - */
#media screen and (max-width: 450px) and (orientation: portrait){
/*...*/
}
/* - PHONE LANDSCAPE - */
#media screen and (max-width: 750px) and (orientation: landscape){
/*...*/
}
/* - IPAD PORTRAIT - */
#media screen and (max-width: 768px) and (orientation: portrait){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 28vw top 3.5vh, right 17vw top 1vh;
}
header object{
left:10vw;
width:24vw !important;
}
header p{
font-size:20px;
top:10vh;
left:-2vw;
}
}
/* - IPAD LANDSCAPE - */
#media screen and (max-width: 1024px) and (orientation: landscape){
header{
background-size: 28vw 30vh, 34vw 38vh;
background-position: right 24vw top 3.5vh, right 21vw top 1vh;
}
header object{
left:16vw;
width:18vw !important;
}
header p{
font-size:14px;
top:16vh;
left:-2vw;
}
}
It solved this type of problem for me. Boostrap doc is following this structure too. (here #screen-sm-min are variables that you can set thank to LESS/SASS, but you cant replace it by fixed number)
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Personally I use something like that if it could help you :
#media (max-width:767px) {}
#media (max-width:767px) and (orientation:landscape) {}
#media (min-width:768px) and (max-width:991px) {}
How can I set automatic line breaks on mobile devices? At the moment my code looks like:
HTML
<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;">SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
CSS
.bg-1{
background-color: black;
background-size: cover;
color: #ffffff;
height: auto;
min-height:620px;
padding:10px;
margin-top:0px;}
body {
font: 20px "Montserrat", sans-serif;
color: #f5f6f7;}
p {font-size: 20px;}
.margin {margin-bottom: 10px;}
h1,h2,h3{
margin-top: 0px;
margin-bottom: 0px;}
.container-fluid{
padding-top: 20px;
padding-bottom: 0px;}
h1{font-size: 50px;}
How can I fix truncate text? I want set automatic brake line on mobile.
Image
It would be a bit of a Janky fix, but this should work... Bootstrap allows us to display/hide information based screen size with built in media query's... so if you wanted to add a break at a specific point in the text, you could do something like the following:
<div class="visible-xs"><br /><br /></div>
or maybe this would even work, Not sure on the following so give it a shot and let us know if it worked for you:
<br class="visible-xs" />
the "visible-xs" class in bootstrap should make the content visible only if the screen size is less than 768px... the alternative is "hidden-xs" which hides content on smaller displays. :) Happy coding!
You can use media queries in CSS to do this. You would give the element that would be the higher up element, a class or id and then set its width to 100% and its display to inline-block or block when the screen is less than a certain size (or greater than a certain size).
With this code every .element will be 100% width then the screen size is 600px or less. if you wanted it to be when the screen is greater than or equal to 600px then you would use min-width: 600px instead.
#media (max-width: 600px) {
.element {
display: inline-block;
width: 100%;
}
}
<div class="container-fluid bg-1 text-center">
<h2>MessageOfTheDay</br>
</br></h2>
<p style="margin-bottom: 100px;" class='workdBreak'>SOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</p>
<h1 style="margin-bottom: 100px;">XXXXXX</br>
<span class='workdBreak'>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</br>
SOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETURSOME LOREMIPSUMDOLORSITAMET,CONSECTETUR</h1>
</div>
</span>
#media only screen and (max-width : 480px) {
.workdBreak{
word-wrap:break-word;
}
}
Used word-wrap css property to break word if it is larger than width of container.
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
http://www.w3schools.com/cssref/css3_pr_word-break.asp
Bootsrap media query
/========== Mobile First Method ==========/
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
I want to change the order of two divs. The HTML:
<div>container
<div> Navigation backwards </div>
<div> Social buttons </div>
<div> Navigation forwards </div>
</div>
Looks like this on a big screen:
<-- [social] -->
I need to change that for small (mobile) devices to:
<-- -->
[social]
Is this possible with pure css? I could just add some HTML and solve it with display: none, but that's an ugly solution imo.
So #acudars is right... but there's some things to consider here. One thing is that the order of your markup will make it tricky to achieve this... so by adding the social buttons at the bottom you can assure this will be easier to achieve.
I went ahead and made a jsFiddle: Demo
HTML
<div class="navCont">
<div class="arrowPrev">←</div>
<div class="arrowNext">→</div>
<div class="socialButtons">Social Buttons</div>
</div>
CSS
.navCont {
background: #f6f6f6;
border-radius: 5px;
clear: both;
overflow: hidden;
padding: 5px 10px;
}
.arrowPrev {
float: left;
}
.socialButtons {
text-align: center;
}
.arrowNext {
float: right;
}
#media (max-width: 320px) {
.socialButtons {
float: none;
clear: both;
}
}
So lets say that you are targeting mobile devices at 320px width... just go ahead and resize the fiddle to see this in action.
The CSS is very straight forward and I just added a little style to make it clear.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I have different views on portrait and landscape
/* portrait ----------- */
#media only screen
and (max-width : 320px) {
body{
padding:20px;
}
}
/* landscape----------- */
#media only screen
and (min-width : 321px) {
body
{
padding:60px;
}
}
/* webpage----------- */
body
{
padding:0px;
}
however, landscape css effects on webpage view. how do I spilt webpage up?
I tried to make another media query on webpage, but it didnt work.
also I tried (min-device-width : 321px) for devices only, but it doesnt work
As explained in this article, the media query spec includes orientation detection. It should look something like this:
#media screen and (orientation:landscape) and (min-width:321px) {
foo {
padding:60px;
}
}
#media screen and (orientation:portrait) and (max-width:320px) {
foo {
padding:20px;
}
}
And so on.