I have the next code:
<!doctype html>
<head>
<head>
<meta charset="utf-8">
<title>Goerman</title>
</head>
<body>
<center>
<div id="image">
<img alt="Embebed Image" src="data:image/gif; base64,R0lG--IMAGE IN BASE64--="/>
</div>
</center>
</body>
</head>
I need that the animate image auto-set to screen the device or size of the navigator.
Add the following class to your style sheet and the corresponding class to your img tag
<style>
.responsiveImage {max-width: 100%; width: auto; height: auto;}
</style>
<img src="data:image/gif; base64,R0lG--IMAGE IN BASE64--=" class="responsiveImage" />
Related
I'm practicing with SCSS and two minutes ago my code was working, before splitting the variables and creating the folder structure.
But now, no matter what I change, there's no way to change the font. It just loads with Times New Roman.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/icon-font.css"> -->
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>Tours</title>
</head>
<body>
<header class="header">
<div class="header__logo-box">
<img src="img/logo-white.png" alt="Logo" class="header__logo">
</div>
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">Outdoors</span>
<span class="heading-primary--sub">is where life happens.</span>
</h1>
Discover our tours
</div>
</header>
</body>
body {
font-family: "Lato", sans-serif;
font-weight: 400;
/*font-size: 16px;*/
line-height: 1.7;
color: $color-grey-dark;
padding: 3rem;
}
.heading-primary {
color: $color-white;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
The imports are ok, so it should be working.
Your code is working fine in jsfiddle. It's displaying Lato as the font. Did you try clearing your cache? You could also try changing the link to:
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap" rel="stylesheet">
This will give an unlimited swap period to load the font if it takes to long to download before render.
My HTML/CSS/Js code is as follows:
let con = document.getElementById("container")
setTimeout(function(){
// while(con.hasChildNodes){
// con.removeChild(con.firstChild)
// }
con.style.display = "none"
},3 * 1000)
#container{
width: 100%;
height: 1080px;
background: #00ff00
}
.item{
width: 100px;
height: 200px;
background: #ff00ff;
animation: move 2s linear infinite;
}
#keyframes move{
0%{
transform: translateX(100px)
}
100%{
transform: translateX(200px)
}
}
<!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>page not refresh</title>
<link rel="stylesheet" href="./css.css">
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script src="js.js"></script>
</body>
</html>
In Chrome or firefox, the UI can be hidden 3 seconds later.
In Cobalt, the UI can't be hidden 3 seconds later.
If we remove the animation from the css file in Cobalt, the UI can be hidden 3 seconds later successfully.
How to hide the UI when there is animation on the page?
Cobalt renders only necessary area. If there is nothing to render, it does not do anything. In your case, there is no specified background color so there is nothing to update after hiding the item.
Setting the background color should fix the problem, as it means there is something to render - which is 'white' color - after hiding the item.
body {
background-color: white;
}
I made container with attribute flex. Put inside 3 images with same height 830px but different width:
img 602x830 px
img 613x830 px
img 599x830 px
made for images attribute: width 100%
All seems to look correct until screen size is more then 630px. After the screen became 630 px and less the height of one image (2-img) became less then others two images.
How to made all images the same height no matter what the screen size becomes.
<!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">
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Document</title>
<style type="text/css">
.category-block {
max-width: 768px;
margin:0 auto;
overflow:hidden;
}
.flex-block {
display:flex;
flex-direction: row;
align-items: stretch;
}
.flex-block img {
width: 100%;
}
</style>
</head>
<body>
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="1-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="2-img.jpg"></img>
</div>
<div class="flex-block__area">
<img src="3-img.jpg"></img>
</div>
</div>
</div>
</body>
</html>
This is an issue I found on Firefox and I haven't found why it fail.
Here is one workaround, using a Firefox CSS hack, making also the flex-block__area a flex container.
The CSS hack is needed to target only on Firefox, or else it will mess up the other browsers instead
Fiddle demo
Stack snippet
.category-block {
max-width: 768px;
margin: 0 auto;
overflow: hidden;
}
.flex-block {
display: flex;
}
.flex-block img {
width: 100%;
}
/* Firefox bug fix */
#supports (-moz-appearance:meterbar) and (display:flex) {
.flex-block__area {
display: flex;
}
}
<div class="category-block">
<div class="flex-block">
<div class="flex-block__area">
<img src="http://placehold.it/602x830/f00">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/613x830/0f0">
</div>
<div class="flex-block__area">
<img src="http://placehold.it/599x830/00f">
</div>
</div>
</div>
The svg rect works well in chrome, but not in firefox. What is the problem? Also, is there any special rules in using svg in firefox?
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
rect {
width: 300px;
height: 100px;
fill: green
}
</style>
</head>
<body>
<svg width="400px" height="110px">
<rect/>
</svg>
</body>
</html>
Using wkhtmltopdf 0.11.0_rc1 (weirdly reporting itself as 0.10.0 rc2) on MacOSX.
This input HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">
#page{
size: landscape;
margin: 10mm;
}
div.page {
height: 180mm;
width: 274mm;
overflow: hidden;
border: 1px solid #ddd;
page-break-inside: avoid;
page-break-after: always;
}
</style>
</head>
<body>
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
</body>
<html>
being processed like so:
wkhtmltopdf --orientation landscape input.html output.pdf
results in no page breaks:
What am I doing wrong?
This might just be a problem of this specific version of wkhtmltopdf.
The most current version wkhtmltopdf 0.12.1 (with patched qt) does respect the page breaks.