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>
Related
As you can see in the code snippets below when the size of the web page reaches 776px it becomes column like aligned but it isn't directly aligned under each other. I have added the align-items property, How do I directly align the elements under each other?
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
align-items:center;
flex-direction: column;
}
}
<!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>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
You could use the align-text attribute in this case:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
text-align: center; /* changed this line */
flex-direction: column;
}
}
<!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>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Or if you want them centered but justified on the left, you can set the width of the container to fit-content, then center the whole container by setting margin: 0 auto;:
.banner-content-container {
display: flex;
justify-content: space-evenly;
padding-top: 200px;
}
#media screen and (max-width:776px) {
.banner-content-container {
width: fit-content;
margin: 0 auto;
flex-direction: column;
}
}
<!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>
<div class="banner-content-container">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</body>
</html>
Setting a fixed width would solve this, but it can be problematic if your content size is variable.
As an alternative, you can add another container (.demo in this example) to avoid having to specific any width. Here we centre the content with the outer container, and left align the content in the new inner flex container:
.banner-content-container {
display: flex;
padding-top: 200px;
justify-content: center;
}
.demo {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
#media screen and (min-width:776px) {
.demo {
flex-direction: row;
width: 100%;
}
}
<!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>
<div class="banner-content-container">
<div class="demo">
<div class="content contexts1">
<h3>01. Mobile conductive</h3>
<p>Smart optimization of RWD design.</p>
</div>
<div class="content contexts2">
<h3>02. User Interface</h3>
<p>Brilliant UI/UX creative designs.</p>
</div>
<div class="content contexts3">
<h3>03. Affordable</h3>
<p>Our offers dont break the bank.</p>
</div>
</div>
</div>
</body>
</html>
The reason is that they are centered but have different width.
The quick fix for this is to set the same width when they are in flex column mode.
#media screen and (max-width:776px) {
.banner-content-container {
align-items: center;
flex-direction: column;
}
.content {
width: 250px;
}
}
display:flex;
flex-direction: column;
Should be together in your media query. Because by default, display:flex is a row.
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.
I'm creating a view but my CSS is not displaying except if I put it inside a <style> I already tried using !important but didn't work too, also tried .container-fluid > .row > .d-flex > .out_profile
The class out_profile is not working the CSS inside that class is not displayed. To see the snippet you have to put it on small devices using the responsive
#media (min-width: 576px) {
.container-fluid{
display: none;
}
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I took out the display: none and it seems to do exactly what you'd expect -- the text is purple (see example below).
Having said that, I don't think
.container-fluid > .row > .d-flex > .out_profile
is a very elegant css selector. Perhaps you are new to css, but except in very limited circumstances would you need the > selector. In most cases, you would simple write:
.container-fluid .row .d-flex .out_profile
and you can probably even leave a few of the middle elements out, but depends on your situation.
And, as HereticMonkey has pointed out, a !important in css code rarely necessary, so it most likely isn't here either. I left it in below just to show that the only thing I changed was to remove the display: none.
#media (min-width: 576px) {
.container-fluid > .row > .d-flex > .out_profile {
color: #662483 !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" TYPE="text/css">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="d-flex align-items-center justify-content-center navbar navbar-light bg-light col-12">
<div class="out_profile">
X
</div>
<span class="navbar-brand mb-0"><h3 style="color: #662483 !important;">Profile</h3></span>
</nav>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
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>
Trying to learn Flexbox, So if I wanted something vertically and horizontally center aligned but I also wanted something else within the parent element to be aligned to the top left corner of the page, would I use two containers or is there a way to vertically and horizontally align child elements? I'm so confused.
I appreciate any replies.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Elements Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/hover.css" type="text/css">
</head>
<body>
<div class='container'>
<div class='content'>
<img alt="" width="400" src="image/box1.svg" class="button hvr-grow">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</body>
</html>
CSS
body{
background-color: azure;
background-size: cover;
height:100vh;
}
.container{
display: flex;
flex-direction: column;
min-height:100vh;
justify-content: center;
align-items: center;
}
.content{
}
.boxorange{
}