I would like the header and the slideshow (the top two elements of my site) to fit 100% of the screen size, no matter what the screen size is. I have tried using 100vh, however once you open the site on mobile the viewport size does not account for the address bar and page controls. Because of this I am now trying to use flex combined with height:100%, however this is not working either.
Here is an example of what I'm tying to get- https://www.rebag.com (the header and slideshow always perfectly fit the screen no matter what screen size)
.slide-head-wrapper {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
}
.header-top-bar-wrapper {
height: 167px;
display: flex;
flex-direction: column;
justify-content: center;
}
.slide-connected {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
html,
body {
height: 100%;
}
<div class="slide-head-wrapper">
<div class="header-top-bar-wrapper">
///HEADER CODE GOES HERE////
</div>
<div class="slide-connected">
///SLIDER CODE GOES HERE////
</div>
</div>
Related
I have a simple webpage with a main section that is 85vh and a "floor" which is 15vh. The floor element contains an image which I want to look like the floor of the page. It has a checkerboard pattern that fades to white and looks like a floor.
My current CSS is working pretty well, however, the problem I'm having is when the user makes the window skinny (less than 800px or so in width), the floor image stars to become really small and it doesn't look good and it doesn't look like a floor anymore.
What changes should I make to the CSS to make the image in the floor element looks like the "floor of the page", no matter what the width or height of the window is? It should probably be centered and adapt to the window width, but not get smaller than 1920px or so the floor looks the same size at any window width, but gets cropped automatically to adapt to the page width.
https://jsfiddle.net/z7w41vd5/
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
height: 85vh;
}
.floor {
height: 15vh;
min-width: 1920px;
width: 100vw;
}
.floor img {
width: 100%;
}
<div class='wrapper'>
<div class='main'>
</div>
<div class='floor'>
<img src='https://i.imgur.com/VuLVv68.png'>
</div>
</div>
Make it a background image instead of an <img /> and you'll be able to control it the way you want to.
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
.main {
min-height: 85vh;
}
.floor {
min-width: 1920px;
min-height: 15vh;
background: url(https://i.imgur.com/VuLVv68.png) bottom center;
}
<div class='wrapper'>
<div class='main'></div>
<div class='floor'></div>
</div>
Alternatively, you could make it the background of the <body> and remove the floor element from your html entirely.
html {
height: 100%;
}
body {
background: url(https://i.imgur.com/VuLVv68.png) bottom center no-repeat;
min-height: 100%;
}
.wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
margin: 0px auto;
}
<div class='wrapper'>
<div class='main'></div>
</div>
I need help to structure a page, i thought it was easy but it wasn't, at least not for me.
Logo: always centered, of course.
Element: For instance, an image, always centered. Image can be vertical or horizontal, but needs to be centered.
Text: Next to the element/image.
There are no boxes really, i saw other questions where they where trying to keep center box always centered, but in this case i just have one main box/container and then text/caption next to the image.
What i cannot do is keeping image centered, because if i add text next to the image, will try to center the whole thing.
Thanks!
Horizontal and vertical centering is most easily solved with flexbox. Simply set the following on your container:
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
Note that you'll want a height too! I've gone with 100vh to occupy the full viewport.
To centralise your element at the top just give it align-self: flex-start.
From here it's just a matter of having a child which contains both the central item and offset item, both of which need position: absolute. The offset item will additionally want margin-left equal to the width of the centralised item, but it should only be applied inside of a media query.
To drop the offset item below for mobile screens, you'll want a second media query which adds margin-top.
This can be seen in the following (click Full page after Run code snippet to see the desktop view).
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
height: 100vh;
}
.top {
border: 1px solid black;
width: 50%;
height: 10%;
align-self: flex-start;
}
.inner-container {
border: 1px solid black;
width: 50%;
height: 50%
}
.center, .off-center {
position: absolute;
}
#media screen and (min-width: 769px) {
.off-center {
margin-left: 50%;
}
}
#media screen and (max-width: 768px) {
.off-center {
margin-top: 50vh;
}
}
<div class="container">
<div class="top">Logo</div>
<div class="inner-container">
<div class="center">Center</div>
<div class="off-center">Off-center</div>
</div>
</div>
Say we have the following layout structure
<div class="full-height>
<nav>....</nav>
<section class="hero>...</section>
</div>
<section class="other-content>....</section>
.full-height {
height: 100vh;
display: flex;
flex-direction: column;
.nav {
padding: 2rem 5rem;
}
.hero {
background-image: .....;
background-size: cover;
flex: 1;
}
}
I want the nav and .hero sections to initially take the full height of the viewport, but when I resize the browser, it should make room for the other section to come in below it.
If I wrap nav and .hero within a parent div and set that divs height to 100vh, it works as expected, but it will always take 100% height of the viewport on resize.
I have a div tag which holds an image inside. The image dimension can go beyond the screen size. In such a case I wish to extend the div tags height and have footer after that. Currently i have styled the div tag as:
#dropbox {
height: 80%;
text-align: center;
display: flex;
flex-direction: column;
min-height: 60vh;
}
#footer{
display: flex;
position: relative}
The problem is that the footer stays where it is. It does not go down all the way to the bottom once the image is displayed in the div tag.
You have a fixed height on your div. If you remove it, the div should be pushing the footer down.
#dropbox {
text-align: center;
display: flex;
flex-direction: column;
min-height: 80%;
}
I have a flex with 3 images and I would want them resize if a window is too small right now when window gets smaller first they reorder so they stack vertically and when window gets even smaller the picture gets squeezed instead of resized I would want to keep the image with proper aspect ratio.
.images {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.images div {
display: flex;
margin: 1rem;
}
.images img {
height: 16rem;
max-width: 100%;
}
<div class="images">
<div>
<img src="http://placehold.it/150x200">
</div>
<div>
<img src="http://placehold.it/150x150">
</div>
<div>
<img src="http://placehold.it/150x100">
</div>
</div>
First of all the basic thing to keep in mind to maintain aspect ratio (I'm sure you already know this) is to restrict only one dimension of an image. (Read this)
You are already breaking this in your code- resulting in the 'squeeze' at smaller screen widths:
.images img {
height: 16rem;
max-width: 100%;
}
When window gets smaller first they reorder so they stack vertically
and when window gets even smaller the picture gets squeezed instead of
resized I would want to keep the image with proper aspect ratio.
So here are your options:
So I guess you should remove max-width: 100% and keep width adjust depending on the 16rem height.
.images {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.images div {
display: flex;
margin: 1rem;
}
.images img {
height: 16rem;
/*max-width: 100%;*/
}
<div class="images">
<div>
<img src="http://placehold.it/150x200">
</div>
<div>
<img src="http://placehold.it/150x150">
</div>
<div>
<img src="http://placehold.it/150x100">
</div>
</div>
Well, for small widths you would have horizontal scroll. According to the particular case, if needed you can use some media queries to adjust height at small screen widths.
Let me know your feedback on this. Thanks!
.images img{
height: 16rem;
max-width: 100%;
object-fit: contain;
}
For the aspect ratio fix, you can just run with the CSS3 object-fit property. CSS3 Object-Fit
Set it on your image as:
.images img {
object-fit: contain;
}
That should do the trick of keeping the aspect ratio of the image.
As for the Wrapping that takes place within the flex container, just take out the flex-wrap property in your code so they'll all stay on the same row, rather than wrapping as the container size gets smaller.
EDIT
Try adding a align-self CSS Property to the .images img, see if that's what you're looking for:
.images {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.images div {
display: flex;
margin: 1rem;
}
.images img {
width: 100%;
height: auto;
object-fit: contain;
align-self: flex-start;
}
Hope this helps!