for some reason, #media screen only and (min-device-width: 1366px) and above (#media screen only and (min-device-width: 1600px) etc) are not being recognzed.
I have a div #contentSpace which contains another div #content. #contentSpace should resize depending on the resolution / screen size.
HTML includes <meta content="width=device-width, initial-scale=1" name="viewport" />.
I have tried min-device.width, min-width, removed and included only next to the screen. It does not help.
For example, this CSS works:
#media only screen and (min-device-width: 100px) and (max-device-width: 719px) {
#contentSpace{
width: 90%;
top: unset;
right: unset;
margin-top: 5vh;
margin-left: 5vw;
}
#content{
width: 90%;
}
}
while this does not work...
#media screen and (min-device-width: 1366px){
#contentSpace{
width: 70%;
right: 15%;
}
}
Any help/advice/suggestions are welcome.
Thank you
After an hour of bashing my head against the wall, I discovered I forgot to close one of the #medias with }.
Related
I want to create a pop up notice that only appears on mobile. I want the message to prompt viewers to flip their device horizontally, and when they do I would like the message to disappear. What would my code for this be?
You can specificially target decvices in portrait mode with CSS queries like the one below:
<div id="pop-up">Turn your device horizontally</div>
/* Hides pop up when landscape */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
#pop-up {
display: none;
}
}
/* Shows pop up when portrait */
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {
#pop-up {
display: unset
}
}
Edit: This jsfiddle is a working example http://jsfiddle.net/jarrodwhitley/gj0dx3zy/
You just need to show it on specific width + on landscape per media query like
#media only screen and (max-width: 769px) and (orientation: landscape) {
.notification {
display: block;
}
}
Here a full example:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style media="screen">
body {
background-color: #666;
}
.notification {
display: none;
position: absolute;
top: 10%;
right: 10%;
left: 10%;
bottom: 10%;
background: white;
box-shadow: 5px 5px;
}
#media only screen and (max-width: 769px) and (orientation: landscape) {
.notification {
display: block;
}
}
</style>
</head>
<body>
<div class="notification">
Please flip your Phone!
</div>
</body>
</html>
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
I am using this code in my web page and I tried different settings for min-width but it take values only from the media query having least width.
#media only screen and (min-width: 900px) {
li{
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px),screen and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
Don't know what is stopping other queries to work properly.
Please add this code in your HTML page
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1.) Your third query should be written like this:
#media only screen and (min-width: 600px) and (max-width: 601px) {...
(a comma would mean two independent selectors)
2.) You made your li elements inline elements. But an inline element can't have any padding - all these padding values don't affect anything. So change the display settings to inline-block for these.
The order of query sizes should be changed. In CSS, the last valid query wins, so the query falls though to the smallest. The largest should come last.
#media (min-width: 768px) {} works for me. also add <meta name="viewport" content="width=device-width, initial-scale=1"> to head tag
#media screen and (min-width: 320px) {
//your css class
}
#media screen and (min-width: 321px) and (max-width:480px){
//your css class
}
#media screen and (min-width: 481px) and (max-width:720px) {
//your css class
}
#media screen and(min-width: 721px) and (max-width:1080px) {
//your css class
}
#media screen and(min-width: 1080px) and (max-width: 1280px){
//your css class
}
#media screen and (min-width: 1281px) and (max-width: 1920px){
//your css class
}
Try using your queries like this, this way worked for me
You have left one curly bracket inside 900 media query. Copy this code and replace media query.
#media only screen and (min-width: 900px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.one{
padding-left: 13%;
}
}
#media only screen and (min-width: 800px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.two{
padding-left: 9%;
}
}
#media only screen and (min-width: 600px) and (max-width: 601px) {
li {
display: inline;
padding-left : 5%;
padding-right: 5%;
}
li.three{
padding-left: 7%;
}
}
add this to in your head tag and close proper media query braces you didnt close do check properly.
I have my media queries at the bottom of my styles, I'm trying to make my grid be 50% of the screens width, however the 50% media query never seems to fire on a phone (iPhone 6s) however will on a browser re-size and I'm not sure why.
/* Media Queries*/
/* Max Width 1250px */
#media only screen and (min-width: 761px) and (max-width: 1000px) {
.boxes {
width: 33.3%;
}
}
/* Max Width 750px */
#media only screen and (min-width: 501px) and (max-width: 760px) {
.boxes {
width: 50%;
}
}
/* Max Width 500px */
#media only screen and (max-width: 500px) {
.boxes {
width: 100%;
}
}
Try adding this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Here's the MDN article on viewport meta tags
Need help in to load image into div without Stretch and Do scaling as well but using CSS.
i have already try few Examples but they are not working. below are those examples,
.img-contain {
width: 550px;
height: 220px;
overflow: hidden;
}
.myimage {
min-width: 100%;
}
<div class="img-contain">
<img src="http://wallpapers111.com/wp-content/uploads/2014/12/Beautiful-Scene-Wallpapers-Hd-1.jpg" class="myimage" />
</div>
This is what your code is saying right now.
Your image will have a minimum width of the image-contain which is 300px wide.
If you want the image to scale as well as keep it's aspect ratio try this code out;
.myimage{
width:100%;
}
Don't set the width of the img-contain to be a fixed width if you want it to scale with the size of the webpage.
If you are wanting a minimum width I would suggest using a media query, then setting a max-width: 100%; and height: auto; or your image will be distorted. This will make your page responsive.
.myimage { max-width: 100%; height: auto;}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
}
}
That would be for mobile portrait. IPhone
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
}
}
Landscape and so on.
.myimage { max-width: 100%; height: auto;}
#media only screen {
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: portrait) {
}
}
#media only screen {
and (min-device-width: 320px)
and (max-device-width: 480px)
and (orientation: landscape) {
}
}