I have following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Media Elements</title>
</head>
<body>
<img id="upay_image" src="" style="width:100%; height:auto;">
</body>
</html>
<style>
#media(min-width: 415px)
{
#upay_image
{
content:url(images/iPadSizeGif.gif);
border:1px solid red;
}
}
#media(max-width: 414px)
{
#upay_image
{
border:1px solid black;
content:url(images/iPhoneSizeGif.gif);
}
}
</style>
I am going to change image based on different screen sizes. However, it is only showing iPad size. Please, help me where am i doing a mistake?
Two options to changes images to different resolutions.
First is
#upay_image{
background-image:url("http://www.w3schools.com/css/img_fjords.jpg");
background-size:100% 100%;
width:400px;
height:400px;
border:1px solid #000;
}
#media(max-width: 768px){
#upay_image{
background-image:url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png");
}
}
#media(max-width: 500px){
#upay_image{
background-image:url("http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg");
}
}
<img id="upay_image" src="">
Second options is
.Ipad,.Mobile{display:none;}
#media(max-width: 768px){
.Desktop,.Mobile{
display:none;
}
.Ipad{
display:block;
}
}
#media(max-width: 500px){
.Desktop,.Ipad{
display:none;
}
.Mobile{
display:block;
}
}
<img src="http://www.w3schools.com/css/img_fjords.jpg" class="Desktop">
<img src="https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png" class="Ipad">
<img src="http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg" class="Mobile">
Related
In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is #media (min-width: 551px) {
div { background-color: Blue }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
#media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?
If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.
Try this code.
If I have the colors reversed, you can just switch them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
You need to add !important to force the CSS according to the screen resolution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
#media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
#media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>
There are two reasons this isn't working the way you want it to currently.
First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.
Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.
So the two solutions are either:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
#media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm trying to print a table but the print dialog windondow shows only in mobile mode. How do I print on pc mode?
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#media print {
*{visibility:hidden}
.printarea,.printarea *{
visibility:visible
}
}
</style>
</head>
<body>
<div>
this content is not printable
</div>
<table class="printarea">
<tr>
<td>
... table content...
</td>
</tr>
</table>
Print
</body>
</html>
SOLUTION
Copied all the css media queries into the print query, my css looks like this
#media screen and (max-width: 768px) {
.addr-table tr:nth-child(2) {
border-top: none;
}
}
#media screen and (min-width: 683px) {
.addr-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
text-align: center;
}
}
.........
#media print {
.addr-table tr:nth-child(2) {
border-top: none;
}
.addr-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
text-align: center;
}
}
.....
Just copied all of them into print query, that does it!
I'm not sure this is only happens on the galaxy S4, but its what I'm using to test it.
I striped the code down to a bare minimum.
Changed the colors just to test the code. Regular css works, mobile version doesn't get triggered.
Thank you,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
#media only screen and (max-device-width : 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>
<body>
<div id="aaa">test</div>
</body>
</html>
It's not working because you're adding the media-query before your actual CSS. Also, you can simply use #media (max-width: 480px) { //styles here for devices whose screen size is less than 480px } instead of #media only screen and (max-device-width: 480px) { //styles here } This should work perfectly:
<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
#media (max-width: 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
</style>
Here's a working demo. You can try reducing the width of the result's window and see the styles of the text changing when the window size is reduced beyond 480px.
My layout currently breaks on 320px resolution (.info drops below .icon and breaks the layout) and I'm lost as to how about preventing it from breaking.
The .num info(number) is being loaded dynamically, and could be anything from 0 - 2147483647. If the screen resolution is not wide enough to show the .num and the .unread on one line, instead of breaking, I would like the .unread to drop down to the next line (display:block applied to it?). I tried to think of a way to use only css, then though I could use js to apply class if more than 2 digits are present, but this direction still doesn't seem right if the resolution is wider and could show more digits. E.G - 1000px could show many more digits... I would want it to stay on one line in this case.
My code is below:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
display:block;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left: 15px;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:10px 0;
}
.num {
font-weight:bold;
font-size:20px;
}
.unread {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">23</a>
<span class="unread">Unchecked Voicemails to Date</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/18Mids4M3SupNwOT8ocP?p=preview
I figured it out. I needed to add a width to the .info container and make the elements inside of .info p display:inline-block.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
body{
padding:20px;
}
.wrapper {
background-color:#cccccc;
border-radius:20px;
overflow:hidden;
border:2px solid black;
}
.icon {
font-size:40px;
padding:12px;
}
.icon, .info {
float:left;
}
.info {
border-left:1px solid black;
padding-left:15px;
width:60%;
}
.info h3 {
font-size:16px;
margin:10px 0 0;
}
.info p {
margin:5px 0 15px;
}
.info span {
display:inline-block;
}
.num {
font-weight:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>
<div class="icon">X</div>
<div class="info">
<h3>Header Information</h3>
<p>
<a class="num">2</a>
<span class="unread">Unopened Voicemails</span>
</p>
</div>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/NanIRaMcK9AJvpNEQG3Z?p=preview
I'm trying to print a business card using HTML and CSS. The user will be able to print using his browser.
When I print in an A4 format there's no problem. When I print it on card paper (cr80 3in by 2in) nothing printed.
What can I do to make it work?
screenshot of the print preview
this is a preview of the print. The frame will hold a qr code and a label.
The code follows. The image src will load with ajax later.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(function(){
function printMe() {
window.print()
}
$("#badge").click(function(){
printMe();
});
});
</script>
<title>Badge</title>
<style type="text/css">
#media print {
.page-break { display: block; page-break-before: always; }
}
*{
margin:0px;
padding:0px;
}
#details{
position:relative;
top:0.8in;
height: 1.1in;
width:100%;
overflow:hidden;
}
#badge{
width:3in;
height:2in;
border:1px solid gray;
//background-image:url("badge-background.png");
}
#qr_code {
margin-top:2px;
float:left;
height:1.1in;
width: 1.1in;
}
#text{
float:right;
margin:0 auto;
width:180px;
}
#first_name{
position:relative;
top:0.3in;
font-size:0.4in;
}
</style>
</head>
<body>
<div id="badge" class="page-break">
<div id="details">
<div id="qr_code"><img src="" id="qr_code_image" width="105" heigth="105"/></div>
<div id="text"><span id="first_name"></span></div>
</div>
</div>
</body>
</html>