I am trying to make a background image into a retina image using LESS CSS and RetinaJs:
in my index.html file :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
[...]
<link type="text/css" rel="stylesheet/less" href="resources/css/retina.less">
<script type="text/javascript" src="resources/js/less-1.3.0.minjs" ></script>
[...]
</head>
<body>
[...]
<script type="text/javascript" src="resources/js/retina.js"></script>
</body>
</html>
in my retina.less file:
.at2x(#path, #w: auto, #h: auto) {
background-image: url("#{path}");
#at2x_path: ~`"#{path}".split('.').slice(0, "#{path}".split('.').length - 1).join(".") + "#2x" + "." + "#{path}".split('.')["#{path}".split('.').length - 1]`;
#media all and (-webkit-min-device-pixel-ratio : 1.5) {
background-image: url("#{at2x_path}");
background-size: #w #h;
}
}
.topMenu {
.at2x('../../resources/img/topMenuTitle.png');
}
I have both topMenuTitle.png (320px x 40px) and topMenuTitle#2x.png (640px x 80px) in the same folder.
When test this code:
In Firefox i have the normal Background
In the XCode iPhone simulator I also have the normal Background
In the iPhone device, I don't have any background at all.
I'm using GWT if that matters.
Any suggestions ? Thanks.
A newer version of retina.less fixes the problem :
You'll need to replace
background-image: url(#path);
with
background-image: url("#{path}");
or else this will not compile on iOS
Related
I'm trying to make a bootstrap badge a different color. I'm a bit new to frontend work, so this is probably an embarrassing question, but I built the following CSS:
.badge .badge-danger{
color:#FFFFFF;
}
And added the new CSS after the original one...
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="content/custom.css"/>
Yet I see no change! Why?
You can change the badge's background color. 'color' changes text's color while 'background-color' is use to change the background of badge.
.badge-danger {
color: #fff;
background-color: #3545dc;
}
The background image in my react application is not showing!
I've applied it to the index.html file in this way:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React and Webpack4</title>
<style type="text/css">
body {
background: url("background.png");
background-size: cover;
height: 100%;
width: 100%; /* For flexibility */
}
</style>
</head>
<body>
<section id="index"></section>
</body>
</html>
However, I get the following error:
GET http://localhost:8080/background.png 404 (Not Found)
I want to load background images by css dependent on the display resolution with the #media keyword. It works fine in Firefox and chrome, but it does not work in Safari. Is there something I miss?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Snowboardschule: Skigebiet</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/fileadmin/css/style.css?1496823820" media="all" title="main">
<style type="text/css">#media(min-resolution: 1dppx){ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}</style>
</head>
<body>
<header>
<div class="trailer">
...
</div>
</header>
</body>
</html>
Try using
<style type="text/css">
#media and screen (min-resolution: 1dppx)
{ .trailer { background-image: url(fileadmin/_processed_/e/d/csm_trailer1_ca6cb9b743.jpg); }}
</style>
I have a ReactJS website recently deployed on Heroku, and believe I have what's needed for a website to be mobile responsive, yet the website just looks exactly how it should look like if it were to be viewed on a desktop. Everything is extremely small when viewed on mobile.
What could be the issue?
Here is the HTML:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script></body>
</html>
Maybe the content extends past the container, like images or something. Try this to see if that's the case:
<html lang="en" class="practice">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Practice Web</title>
<meta name="description" content="practice">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
please help me, I could not change to iphone css from pc css
My pc.css and iphone.css is the same css
also I setting below:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:320px) and (max-device-width:480px)" href="{% static "asset/js/iphone.css" %}"/>
</head>
</html>
iphone.css is:
#media screen and (max-width:320px) {
body{
background-color:#e5e5e5;
Max-width: 100%
}
}