I have in image centered on the page through a container which I'm not really sure is the correct way to do it but it worked until I found out the problem I have which is it doesn't get resized!! i tried the img-fluid as bootstrap documentation says but i think the issue might be with the container?
.center-logo {
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
position: absolute;
top: auto;
left: 50%;
transform: translate(-50%, -15%);
width: 100%;
height: auto;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link type="text/css" rel="stylesheet" href="static/style1.css" media="screen"/>
<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">
</head>
<body>
<div class = "center-logo">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).jpg" class="rounded-circle" alt="...">
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
The image is small and it is resizing correctly but the max width and height is 250px; you should use a bigger image to resize correctly in larger screens.
Related
I'd like to have this hover animation run once when the page loads, preferably without JS.Border must remain there after the animation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
width: 0%;
border-bottom: 5px dotted black;
transition: .5s;
}
.border-bottom-animate:hover:after {
width: 100%;
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
That is all there is to the problem. No further details worthy of adding.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
.border-bottom-animate:after {
content: "";
display: block;
border-bottom: 5px dotted black;
transition: .5s;
width: 100%;
animation-duration: 3s;
animation-name: border-animation;
}
#keyframes border-animation {
from {
width: 0%;
}
to {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container border-bottom-animate">
<p style="font-size: xx-large">
I want to animate this without hover
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to define this HTML/CSS layout:
+---------------------+
| navbar |
+---------------------+
| |
| h1 |
| |
| image | <= main-content
| |
| p |
| |
+---------------------+
Where the image is shrink if necessary to fit the viewport. I tried the following code, but the image set the height of .main-content while I want .main-content to set the height of the image. What's wrong?
body {
display: flex;
flex-flow: column;
height: 100vh;
}
.main-content {
flex-grow: 1;
display: flex;
flex-flow: column;
}
img {
max-width: 100%;
max-height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container mt-5 main-content">
<h1>Hello, world!</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"
/>
<p>some more text</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
I am very new to html/CSS. So I may be way off the mark here.
Based on my limited understanding, if the image is larger than the size of the parent, the parent will grow with the image. Hence the image is setting the height of .main-content. So to make the image fit the viewport two options come to mind.
Reduce the size of (Ex: this image is a small image and will fit most viewports)
Use 'calc' explicitly set the image height and width to always fit the viewport. For ex: in your example let's say the navbar, h1 and p take up 30% of the viewport. Then I would set the width and height the following way:
img {
width: 100vw;
height: calc(.70 * 100vh); //i.e. 70% of the viewport
object-fit: cover; //(Depends on your goal. If you want then entire image, contain might work better.)
}
body {
display: flex;
flex-flow: column;
height: 100vh;
}
.main-content {
flex-grow: 1;
display: flex;
flex-flow: column;
}
img {
height: calc(.70 * 100vh);
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>
<div class="container mt-5 main-content">
<h1>Hello, world!</h1>
<img
src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg"
/>
<p>some more text</p>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</body>
</html>
Bootstrap (using version v3.3.7) is adding 30px extra left/right padding to my browser padding and so adding a scrollbar when I use a fluid container. Normal bootstrap container is fine.
[edit]If I remove the bootstrap js file, then I do not get the padding issue.
I have read up on this and all the problems seem to step from from older versions where the following was required:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
But this is exactly what my css says.
I have been able to 'fix' it by removing the same padding left/right that is also added to 'col-xs-12' css. But why, This is all I am doing?
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../../css/bootstrap.css" >
<link rel="stylesheet" href="../../patientApp/css/bootstrap-theme.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
layout test
<div class="container-fluid">
<div class="row">
<DIV class="col-xs-12">
<span title="">TEST</span>
</div>
</div>
</div>
</body>
</html>
If I add multiple columns to add up to 12, the same thing happens.
thanks.
So im trying to create a zoomable image using css transform: scale and and overflow on the container div. However when the scale is put on the image, i am unable to scroll up or left.
Ive included my test code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<!-- CSS INCLUDES-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- JS INCLUDES -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- TITLE -->
<title>test</title>
</head>
<style>
#zoom-wrapper {
overflow: auto;
height: 90vw;
width: 90vw;
border: 1px solid black;
display:flex;
justify-content:center;
align-items:center;
}
.zoom {
transform: scale(2);
transition: transform ease .2s;
}
</style>
<script>
$(document).ready(function() {
$('#zoom').click(function() {
$(this).addClass('zoom')
});
});
</script>
<body id="gallery-wrapper" style="background-color: #efefef">
<br><br>
<div id="zoom-wrapper">
<img id="zoom" class="img-responsive center-block" alt="zoom" src="https://i.ytimg.com/vi/7ecYoSvGO60/maxresdefault.jpg">
</div>
</body>
</html>
I developp with phonegap and I have got a problem with the style.
I just want to place a footer at the bottom.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body id="page">
<div id="bottom">
<p>Bonjour</p>
</div>
</body>
</html>
This is my css
#bottom {
position:fixed;
width: 100%;
bottom: 0px;
background-color: #f00;
}
body {
min-height: 533px;
height : 100%;
padding: 0;
margin: 0;
}
And I've got this
Result on the phone
How can I solve this, or anyone meet the same problem?
Thanks !
Check the styles, make sure there aren't any other styles that are being automatically added. The one thing to check in particular is the style for the <p> Try setting the margin and padding both to 0.
First thing, is that to position fixed does not work on IE.
To fix this, I add to include jquery on my project and change the position to absolute
#bottom {
position:absolute;
width: 100%;
bottom: 0px;
background-color: #f00;
margin: 0px;
padding: 0px;
left: 0px;
}
and my index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script type="text/javascript" src="cordova-2.6.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div id="bottom">
<p>Bonjour</p>
</div>
</body>
</html>
And now it's working