When height is reduced below certain limit the image placed at top of div is not visible and cannot be scrolled up as shown in the pictures. Can anyone tell on how to solve this.
Webpage when resized:
Full webpage:
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box {
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
img {
position: relative;
top: -20px;
left: 120px;
}
<div class="box">
<img id="xy"src="https://placeimg.com/50/50/animals">
</div>
At "body" part of css, try "min-height" instead of "height".
/*your code*/
body{
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.box{
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
/*try this one instead ("min-height" instead of "height") and (added "margin-top: 5vh" to ".box")*/
body{
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.box{
margin-top: 5vh;
background: lightblue;
width: 300px;
height: 500px;
min-height: 300px;
}
Your img is positioned relative to the nearest positioned ancestor. That means it is being placed -10px beneath the body, because .box does not have any position set.
Related
I'm currently having an issue where whenever I attempt to have a child take up 100% of the remaining height of a container, the child's height expands way past the border of the parent.
HTML
.container {
height: 340px;
/* background-image: url(../images/topo-bg-3-black.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat; */
background-color: #DDDEDA;
display: flex;
align-items: center;
justify-content: center;
}
.container-wrap {
height: 200px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.content {
height: 100%;
width: 171px;
background-color: aqua;
}
.content-pic {
width: 100%;
height: 115px;
background-color: green;
margin-top: 5px;
}
.content-text {
background-color: red;
height: 100%;
width: 100%;
}
<div class="container">
<div class="container-wrap">
<div class="content">
5 HOURS AGO
<div class="content-pic"></div>
<div class="content-text"></div>
</div>
</div>
</div>
The JSFiddle containing my code is here.
I've attempted using align-items: stretch; as well as the position property as other threads have suggested to no avail. The width takes up 100% of the container just fine, but the height doesn't, and I'm a bit stuck on what to do.
I collected two solutions for you.
The first one(As I said in the comment area) is to using overflow: hidden to hide the overflow part of the element:
.content {
height: 100%;
width: 171px;
background-color: aqua;
overflow: hidden;
}
The second one is solve this problem completely, I determined that the content-pic of its height you are using is 115px but not percent, so the thing will overflow, so here is the solution:
.content-pic {
width: 100%;
height: 115px;
background-color: green;
margin-top: 5px;
}
.content-text {
background-color: red;
height: calc(100ph - 115px);
width: 100%;
}
The reason why it will overflow at the beginning is that you put two elements, one has 115px size, and another has 100% size, so the second one's top position is 115px while the width is still 100%.
In that case, I change width:100% into calc(100ph - 115px). 100ph is similar to 100%, and 115px is the height of content-pic.
Furthermore, please using span instead of using nothing because if you do not do that, it will not work in some case.
This is the whole code(For the second solution):
.container {
height: 340px;
background-color: #DDDEDA;
display: flex;
align-items: center;
justify-content: center;
}
.container-wrap {
height: 200px;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.content {
height: 100%;
width: 171px;
background-color: aqua;
}
.content-pic {
width: 100%;
height: 115px;
background-color: green;
margin-top: 5px;
}
.content-text {
background-color: red;
height: calc(100% - 115px);
width: 100%;
}
<div class="container">
<div class="container-wrap">
<div class="content">
<span>
5 HOURS AGO
</span>
<div class="content-pic"></div>
<div class="content-text"></div>
</div>
</div>
</div>
I want the image and text to display on the same line, and have the image shrink and stay inline as the window shrinks.
Below is the CSS code. I want the image to shrink as the window shrinks.
.body1 {
display: flex;
flex-wrap: wrap;
background-color: #3803f6;
color: white;
align-items: center;
justify-content: space-between;
height: 500px;
padding: 0px;
margin: -10px;
position: relative;
height: 100%;
justify-content: flex-start;
}
.text {
display: flex;
display: block;
width: 300px;
height: 300px;
padding: 15px;
padding-left: 90px;
color: rgb(201, 212, 254);
}
.imgcontainer {
display: flex;
overflow: hidden;
position: relative;
align-items: center;
padding-bottom: 50px;
background-color: aqua;
}
.img {
display: flex;
background-image: url('blue.jpeg');
padding: 100px;
position: relative;
background-size: cover;
}
Any suggestions would be nice
Give the img container a percentage width and the img element width=100%.
For example if you had 3 images on every line with 10px margin, set img container width to width: calc(100%/3 - 20px) and so on. Same goes with the text, it depends how many element you want on each line and then do the calculations accordingly.
I'm trying to center a circle in another circle using 2 divs. And I noticed that at some zoom levels the width and the height shown in browser are different from what I specified. I have a 50px x 50px div and after zoom sometimes it gets smth like 49.992 x 49.992.
.outer {
position: relative;
width: 100px;
height: 100px;
background: #7154d4;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: #ff00ff;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
div {
border-radius: 50%;
}
<div class="outer">
<div class="inner"></div>
</div>
Is this something normal or is there a way to not let this happen?
Tested on Chrome and Firefox.
Here is a testing link: https://codepen.io/StefanAlif/pen/RwMwrMj
Remove margin-left:auto and margin-right:auto from .inner class
and
Add position:absolute to .inner class
This will work.
.outer {
position: relative;
width: 100px;
height: 100px;
background: #7154d4;
display: flex;
justify-content: center;
align-items: center;
}
.inner {
background: #ff00ff;
width: 50px;
height: 50px;
position: absolute;
}
div {
border-radius: 50%;
}
<div class="outer">
<div class="inner"></div>
</div>
I created a layout using css and Flexbox, the issue is the footer div displays at the bottom of the page on load, but content shoots past it, so when you scroll the footer is just floating in the middle of the page. I'm not sure what to change.
I have changed the footer to be sticky, and bottom to be 0px. It kinda worked with adjusting the margin of the other divs, but its not very clean. I was hoping to keep using the flexbox attributes and just have them stack, but that doesn't seem to work? I've also adjusted the min-max heights of the other divs, but as soon as the window shrinks past the min height the footer just floats over the rest of the content.
Link to code JSFiddle
.footer{
height:40px;
display:flex;
align-items:center;
justify-content:center;
width:100%;
background-color:purple;
}
I would suspect that the footer would obey the stacking order and just display under the rest of the content, like the main body does under the header.
It's the height set on your '.content' class. Change height: calc(100vh - 100px) to min-height: calc(100vh - 100px)
Unless you want the footer and header always visible, then you can just add overflow: auto to make the content scroll
Remove height: calc(100vh - 100px); from .content class
body,
html {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.bodywrap {
display: flex;
flex-wrap: wrap;
align-content: space-between;
background-color: black;
}
.header {
display: flex;
justify-content: space-between;
width: 100%;
height: 60px;
background-color: brown;
}
.hleft {
display: flex;
align-items: center;
justify-content: center;
width: 250px;
background-color: lightgreen;
}
.hmid {
display: flex;
align-items: center;
justify-content: center;
flex-grow:1;
font-size: calc(1.5vw);
background-color: orange;
}
.hright {
display: flex;
align-items: center;
justify-content: center;
width: 400px;
background-color: pink;
}
.content {
display: flex;
justify-content: space-between;
background-color: darkblue;
}
.lmenu {
display: flex;
width: 250px;
flex-wrap: wrap;
align-content: space-between;
height: 100%;
min-height: 600px;
background-color: lightgrey;
overflow: hidden;
}
.ltop {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
width: 100%;
background-color: blue;
}
.lmid {
height: 50px;
width: 100%;
background-color: green;
}
.lbot {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
background-color: yellow;
}
.rmaincont {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: calc(100vw - 250px);
background-color: grey;
}
.note {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
height: 50px;
}
.main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
height: calc(100vh - 50px);
min-height: 550px;
width: 100%;
padding-left: 20px;
background-color: red;
}
.footer {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Mid-Valley Intranet</title>
<link rel="stylesheet" type="text/css" href="css/cstyle.css">
</head>
<body>
<div class="bodywrap">
<header class="header">
<div class="hleft">Left</div>
<div class="hmid">Mid</div>
<div class="hright">Right</div>
</header>
<div class="content">
<div class="lmenu">
<div class="ltop">
Top
</div>
<div class="lmid">
Mid
</div>
<div class="lbot">
Bot
</div>
</div>
<div class="rmaincont">
<div class="note">
Notice
</div>
<div class="main">
Main Content
</div>
</div>
</div>
<footer class="footer">
Footer Text
</footer>
</div>
</body>
</html>
There are a few things did to do to make this work:
Originally the scrolling was happening on the body. I added overflow: hidden on the body and overflow-y: auto to the div with the "bodywrap" class.
I added the position sticky and bottom 0, but with vendor prefixes:
bottom: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
I also made the div with class "bodywrap" have a height equal to 100vh minus the height of the footer (so that the scrolling content doesn't get cutoff at the bottom). You may want to set a sass variable or something for this 40px height.
height: calc(100vh - 40px);
Here's a demo of the new version:
jsfiddle.net/webwhizjim/6f84b7su/3/
Image stretches if I don't use object-fit contains. Stretches in width, losing aspect ratio.
object-fit contain fixes that.
The problem is, the element itself is not contained, just the visible image. Which means if I make the image clickable, the whole element area (even outside the image) is clickable.
https://jsfiddle.net/nyysyngp/10/ (or see code below)
I just want the visible image to be clickable. This seems to work on Firefox, but not Chrome.
body, html
{
margin: 0;
padding: 0;
background-color: red;
display: flex;
height: 100%;
width: 100%;
}
#media
{
display: flex;
background-color: #262423;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1;
}
#media_split
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
#media_image_container
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
#media_image
{
object-fit: contain;
max-height: calc(100% - 4em);
max-width: calc(100% - 4.7em);
min-height: 100px;
min-width: 100px;
cursor: pointer;
}
#media_tv
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:blue;
}
<div id='media'>
<div id='media_split'>
<div id='media_image_container'>
<img id='media_image' src='https://i.imgur.com/F26h0tq.jpg'>
</div>
<div id='media_tv'></div>
</div>
</div>
Well some months later I found a solution. Just by adding "position: absolute" to #media_image the problem went away, which in my case didn't break anything else.
In #media_image_container remove display: flex; and add text-align: center;
It will fix the issue.