This is what I currently have: Here
This is what I want: Here
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
padding-top: 10px;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.container {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-top: 60px;
padding-bottom: 60px;
background-color: pink;
/* height: 150vh; */
}
<!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>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
<img src="images/welcomehome.png" style="width: 50vw;">
<img src="images/buysell.png" style="width: 50vw;">
</div>
</div>
</body>
</html>
I was messing around with the CSS padding and margins, but I didn't have any luck. I'm also new to Flexboxes so perhaps I missed something in my container CSS?
You can try this approach with a flexbox on content.
Side note that I'm using a fake image and fixed height on images for the demo purpose, you can modify them with your needs.
.headercontainer {
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://static.wixstatic.com/media/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg/v1/fill/w_1215,h_810,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/062482_377883e1ce2a449aba2c775b8f57027b~mv2.jpeg");
height: 35vw;
background-repeat: repeat-x;
background-size: cover;
background-position: center;
}
.content {
display: flex;
flex-direction: column; /*Display all images from top to bottom*/
align-items: center; /*Align all images to be center*/
height: 100%; /*Make the image container full-height*/
}
<!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>Real Estate</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="background-color: #e3e3e3;">
<div class="headercontainer">
<div class="content">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 30vw; margin-bottom: 50px;" height="100">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw; margin-bottom: 10px;" height="50">
<img src="https://fujifilm-x.com/wp-content/uploads/2019/08/x-t30_sample-images02.jpg" style="width: 50vw;" height="50">
</div>
</div>
</body>
</html>
I think the problem is you have given padding top as 30px for the first image.Just removing the padding top may be helpful for you.
change the first image padding from
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 30px;">
to
<img src="images/manifestspace.png" style="width: 30vw; padding-top: 0;">
Related
I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I am looking to display 4 quadrants on the page with no vertical or horizontal scrollbar using flexbox. I achieved this. Each quadrant will contain an image. This is where the problem comes in. The aspect ratio of the images will be the same but the sizes could vary.
I would like each image to always completely fill its div regardless of the size of the display (something like what object-fit: contain does).
The images should not overflow outside of their divs and should not create a scrollbar.
Guidelines:
The 4 quadrants combined should fill the entire browser window with no horizontal or vertical scrollbars
Each image must fully fill its quadrant without any overflow or padding / spacing
Here is what I have so far:
body {
padding: 0; margin: 0;
height: 100vh;
}
.item {
width: 100%;
height: 100%;
}
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
width: 100%;
object-fit: contain;
}
<!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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<div class="item"><img src="https://dummyimage.com/400x200/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/800x400/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/1200x800/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/2400x1600/000/fff"></div>
</div>
</body>
</html>
remove the inner div .item set width and height of .container to 100vw & 100vh.
image will have 50% on both height and width of the parent.each image size will be equal to 50vw,50vh.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: 1px solid red;
}
.container {
display: flex;
width: 100vw;
height: 100vh;
flex-wrap: wrap;
}
img {
width: 50%;
height:50%;
}
<!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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<img src="https://dummyimage.com/400x200/000/fff">
<img src="https://dummyimage.com/800x400/000/fff">
<img src="https://dummyimage.com/1200x800/000/fff">
<img src="https://dummyimage.com/2400x1600/000/fff">
</div>
</body>
</html>
.container > div {
display: flex;
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
flex-grow : 1l
width: 100%;
min-width: 100%;
max-width: 100%;
overflow: hidden;
object-fit: contain;
}
i think this should work
body {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100vw;
height: 100vh;
}
.container>div {
flex: 50%;
box-shadow: 0 0 0 1px black;
}
img {
width: 100%;
object-fit: cover;
height: 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>
<link rel="stylesheet" href="styles.css">
<!-- <script src="scripts.js"></script> -->
</head>
<body>
<div class="container">
<div class="item"><img src="https://dummyimage.com/400x200/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/800x400/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/1200x800/000/fff"></div>
<div class="item"><img src="https://dummyimage.com/2400x1600/000/fff"></div>
</div>
</body>
</html>
I'm not sure what you see; is this what you want?
If it's not, could you share an image of what you seek it to look like
I wanted to center the social media images and bunch them together. I figured I can move it over to the right by using right: 100px;, but it won't stay relative to page size. If I scale my page to mobile size, it doesn't stay centered as the header does.
This fiddle might make it easier to understand.
Set the display property on "row" to flex and use "justify-content" to position the elements in center horizontally. You can remove relative positioning on the ".social" elements.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.column {
z-index: 100;
}
.row {
display: flex;
z-index: 100;
justify-content: center;
}
.social {
display: block;
margin-left: auto;
margin-right: auto;
width: 36px;
z-index: 100;
}
#header {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div class="column">
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>
I want the four social media images to be at the top, but I want to replace the bottom: 60px;on the .social with something else. Because if you go on other smaller screen devices it goes off the screen, other words 60px up (not responsive).
This fiddle might make it easier to understand.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
bottom: 60px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
</body>
</html>
Ideally if you want the images to be on top (above) the image, you'd structure your HTML as such, by moving the .social elements above your independent <img> tag.
From here you can work from the top instead of from the bottom.
However, note that instead of top, you'll want to use margin-top. Otherwise you'll have giant click-zones well outside of the child <img /> tags.
I've swapped to this in my example (note you may need to adjust the margin-top value):
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
margin-top: 30px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container{
max-width: 480px;
margin: 0 auto;
}
.container .carousel{
background-color: lightsalmon;
height: 400px;
width: 100%;
/* Make the carousel's width fill the viewport */
}
.container .content{
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
}
</style>
</body>
</html>
I have this kind of problem.
I need to make the carousel fill the entire viewport horizontally.
I don't want to use position: absolute cuz it will lose the height info to other elements, so I need to add more css to the container and if I need to change the height of the carousel, I need to modify both places. And I don't want to detach it from container as well cuz it suppose to be inside of the container.
So is there better a way that I only need to add some css to .carousel to achieve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container{
width: 100%;
margin: 0 auto;
}
.container .carousel{
background-color: lightsalmon;
height: 400px;
width: 100%;
margin-bottom: .5em;
/* Make the carousel's width fill the viewport */
}
.container .content{
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
max-width: 30%;
margin: 0 auto;
margin-bottom: .5em;
}
</style>
</body>
</html>
I hope this is what you are looking for!
Also, you should not limit your container to certain width if you want your content elements to fill the complete view port, instead resize you elements as per the need.
Have created a new codepen sample. Check classes row, container-fluid and container here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="carousel"></div>
<div class="placeholder"></div>
<div class="content"></div>
<div class="content"></div>
</div>
<style>
.container {
max-width: 480px;
margin: 0 auto;
}
.container .placeholder,
.container .carousel {
height: 400px;
}
.container .carousel {
background-color: lightsalmon;
width: 100vw;
position: absolute;
left: 0;
}
.container .content {
margin: 10px 0px;
background-color: steelblue;
height: 200px;
width: 100%;
}
</style>
</body>
</html>
Wait, I think I figured out a way to solve this.
By adding a placeholder div below the carousel sharing the same height.
Now I can make the carousel position: absolute without screwing up the contents below.
This is one way to do it using viewport:
<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>viewport</title>
<style>
body {
margin: 0 auto;
padding:0px;
}
.layer {
width: 100%;
height: 100vh;
color:#000;
text-align:center;
}
p {
margin: 0 auto;
}
.one {
background-color: blue;
}
.two {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<div class="layer one">
<p>layer one</p>
</div>
<div class="layer two">
<p>layer two</p>
</div>
</div>
</body>
</html>