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>
Related
New to Javascript and have spent hours on this problem :/
I want to implement a smooth scrolling effect to move to different sections of a webpage. I am using this piece of javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main')
.animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
This is the basic structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin-left: 30%; margin-right: 30%">
<main>
<div class="contactme-button">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: grey; display: block;"> </div>
<div class="contactme-button-2">Contact me</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: blue; display: block;"> </div>
<div class="contactme-section" id="contactme" style="width: 100%; height: 100px; background-color: grey;">CONTACT ME</div>
<div class="section-1" style="width: 100%; height: 1000px; background-color: black; display: block;"> </div>
</main>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('a').on('click', function(e) {
if (this.hash !== '') {
e.preventDefault();
const hash = this.hash;
$('html, body, .main').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
</script>
</html>
(there is more content in there but that is the basic structure that is giving me grief)
I discovered that in
.main{
overflow-x: hidden;
}
is stopping the normal operation of the scrolling and cause the second link to scroll to a random spot
There's a CSS declaration that may help here:
.your-anchor-element-class {
scroll-margin-top: 36px; // <-- your value here
}
Browser support: Works natively in Chrome, FF, Edge, Opera. Supported in Safari with scroll-snap-margin-top.
MDN docs.
Credit to Josh Comeau for pointing this out.
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 have a page with list of 18 links in sidebar, and on clicking a link main section image must change. By default first images is visible. I know it can be done. please help me.
Thanks
kristtee
This should be enough to get you moving in the right direction. This particular example uses jQuery and is only one of many ways to implement something like this.
<!DOCTYPE html>
<html>
<head>
<style>
.main img {
width: 500px;
height: 500px;
}
.thumbs img {
width: 50px;
height: 50px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat">
</div>
<div class="thumbs">
<img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat">
<img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.thumbs img').on('click', function(){
var src = $(this).attr('src');
$('.main img').attr('src', src);
})
})
</script>
</body>
</html>
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" />
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.