I am developing a website and I have a slider with photos of people, that on click (using and event listener) displays a new section that was on display:none and it is 100vh and 100vw, which is great on desktop, but on mobile the text does not fit in 100vh and I want to make it scrollable, but it being a fixed section I do not know how.
(This is for a client and all the data is protected but here's my css now:
#media(min-width: 768px){
#sectionFranck{
position:fixed!important;
background-color: #000000d9;
display:none;
width: 100vw;
height: 100vh;
z-index:20;
top:0;
left:0;
transition: 0.5s;
animation-name:opacity;
animation-iteration-count: 1;
animation-duration: 0.4s;
}}
#media(max-width: 768px){
#sectionFranck{
position:fixed!important;
background-color: #000000d9;
width: 100vw;
z-index:20;
display:none;
top:0;
left:0;
transition: 0.5s;
animation-name:opacity;
animation-iteration-count: 1;
animation-duration: 0.4s;
}}
I have tried using Height:auto or more than 100vh but nothing makes it scrollable. I saw in some other threads that it should help making it Absolute instead of fixed but it only sends it to the top of the page, using top:0 and it is still not scrollable.
height: auto; Height:150vh; Position:absolute; . Nothing worked for me
It's difficult to understand what exactly you are trying to do as you haven't provided any HTML-code. That being said, have you tried putting a <div> element around the section you want to be scrollable? That way you could make the outer-div 100vh and the inner-div as high as you want to after which you can use overflow-y: scroll on the inner-div so you can scroll through the content.
Related
I have been messing around with a background carousel and the only issue I have is that when the images slide in, the height is adjusted in a glitchy kind of manner. How do I fix this issue?
For reference, my webpage is here.
Here is my carousel css:
.carousel-item,.active{
height:100vh;
width:100%;
overflow:hidden;
margin:0;
padding:0;
-webkit-transition: 0.6s ease-in-out left;
transition: 0.6s ease-in-out left;
}
It's because you have this:
.img-slide {
width: 100%;
height: 100%;
}
and you should have this:
.img-slide {
width: 100%;
height: 100vh;
}
this makes the height consistent. 100vh on the div that contains the image get's applied when the slide is already in the final position, that's why the image size "jumps".
It looks like your selectors are wrong for the way your HTML is setup.
Should be .carousel-item not .carousel,.item.
Just remove the height:100vh and put this css
.carousel-item.active {
display: block;
height: auto;
}
Hope this helps!
To solve your current page problem you can do following css code
.carousel-inner{
height:100vh;
}
.carousel-item{
height:100vh;
}
Add 100% height on both carousel-inner and carousel-item.
Consider the following structure:
<div id="PARENT_DIV">
<div id="LEFT_CHILD_DIV">
</div>
<div id="RIGHT_CHILD_DIV">
</div>
</div>
Requirements for PARENT_DIV:
PARENT_DIV will be placed in front of all other GUI elements via z-index.
PARENT_DIV should expand both horizontally and vertically based on the variable sizes of LEFT_CHILD_DIV and RIGHT_CHILD_DIV, but only to a certain point. E.g., I need to be able to set the equivalent of max-width and max-height on PARENT_DIV. For vertical height, PARENT_DIV should expand up to the height of the taller child div (but still only up to max-height), and the other child should float to the top.
I need to be able to arbitrarily place PARENT_DIV on the screen by various means (e.g., top: Ypx; left: Xpx; or top: Y%; left: X%; or top: 50%; left: 50%; transform: translate(50%, 50%);, etc.).
Requirements for each of **LEFT_CHILD_DIV and RIGHT_CHILD_DIV:**
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should each expand both horizontally and vertically based on their content, but only to a certain point. E.g., I need to be able to set the equivalent of max-width and max-height independently on LEFT_CHILD_DIV and RIGHT_CHILD_DIV.
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should always be side-by-side, regardless of their capped widths.
LEFT_CHILD_DIV and RIGHT_CHILD_DIV should each/independently vertically scroll their content when they can no longer grow taller (capped by either their max-height rules or PARENT_DIV's max-height rule, whichever comes into effect first.
Please see this example Photoshop mock-up for a visual of what I'm trying to accomplish. I have not been able to find a CSS-related tutorial on how to accomplish exactly the above. I've found bits and pieces, but they do not work when combined together. I've tried numerous CSS combinations/variations on rules like display, overflow, box-sizing, position, etc., and am not achieving any success. How can I accomplish the above requirements using CSS?
I can accomplish this with JavaScript, but would like to avoid scripting if possible, and do this in pure-CSS way.
You can use flexbox like this:
#PARENT_DIV {
position:absolute;
top:50px;
left:150px;
border: 1px solid red;
display: inline-flex;
max-height: 200px;
max-width: 300px;
align-items: flex-start;
}
#LEFT_CHILD_DIV {
border: 1px solid green;
max-width: 180px;
max-height: 100px;
overflow: auto;
}
#LEFT_CHILD_DIV>div {
height: 200px;
width:200px;
background:rgba(0,0,0,0.5);
animation:change 2s infinite alternate linear;
}
#RIGHT_CHILD_DIV {
border: 1px solid orange;
max-width: 80px;
max-height: 50px;
overflow: auto;
}
#RIGHT_CHILD_DIV>div {
width: 200px;
height:300px;
background:rgba(0,0,0,0.5);
animation:change 2s 1s infinite alternate linear;
}
#keyframes change{
to{width:5px;height:20px;}
}
<div id="PARENT_DIV">
<div id="LEFT_CHILD_DIV">
<div></div>
</div>
<div id="RIGHT_CHILD_DIV">
<div></div>
</div>
</div>
I have an absolute div (needs to be absolute).
The absolute div has a background-image with the background-size set to cover (size cover necessary)
I'm using a css transform to scale the div upon hover to a value less than 1, for example, scale(0.7)
Issue: I want the cover background-image to overflow beyond the div when it's scaled down.
Why I need it: The image is transparent with different graphics floating around and of the background-size cover so when browsing in a mobile, the transform crops graphics on the edge of the div and scales the div.
CSS solutions only please.
Edit: CSS + js solutions will do.
Example: the outer div is supposed to represent a mobile browser window.
.chivoyage{
position:absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
background-image:url('http://clipart.info/images/ccovers/1495916688repin-image-stars-png-transparent-stars-on-pinterest.png');
background-size:cover;
background-position:center center;
transition: all 1s ease-out 0s;
cursor:pointer;
}
.chivoyage:hover{
transform: scale(0.8);
}
.window-mobile{
width:150px; height:300px; position:relative; border:1px solid black;
}
<div class="window-mobile"><div class="chivoyage"><div></div>
<div>
Do not use scale just try background size , on hover reduce the size. Have a look at the code
.chivoyage{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url(http://clipart.info/images/ccovers/1495916688repin-image-stars-png-transparent-stars-on-pinterest.png)no-repeat center;
background-size: 270%;
transition: all 1s ease-out 0s;
cursor: pointer;
}
.chivoyage:hover{
background-size: 200%;
}
.window-mobile{
width:150px; height:300px; position:relative; border:1px solid black;
}
<div class="window-mobile"><div class="chivoyage"><div></div>
Ok after some thought, I arrived at a solution.
Basically, background-size: cover
logically equals
background-size: 100% auto
if the width:height ratio of image is lower than that of container
background-size: auto 100%
if the width:height ratio of image is higher than that of container
So I ended up calculating the ratio using naturalheight and naturalwidth and with an if statement, I get which background-size to apply, thus maintaining the behaviour as cover while being able to work with the values via js to transform background-image.
On a side note, if you need to work with background-size:contain, just calculate the ratio and do the opposite (1. would be auto 100% and 2. would be 100% auto)
I'm building a web application in which I want a specific element to scale relative to it's parent. As far as I know, the only way to achieve this without using javascript is to use an image with the desired aspect ratio (there have been several other Stackoverflow posts about this issue), which is what I have done, so basically this:
div { height:20%; display:inline-block; }
div img { height:100%; }
This causes the div to scale the way I want, but the problem is that when the browser is resized, the width of the image changes, but the width of the div doesn't.. After refreshing the page, the element will be scaled properly again.
I've made a working example here: https://jsfiddle.net/r1efuzmb/ You can see the issue when you resize your browser or the "output" column on the Jsfiddle website.
Some notes:
The issue only occurs in Chrome and IE. In Firefox and Safari the div is scaling correctly.
I could use vh-units to set the width, but since I'm trying to scale this element relative to it's parent and not the viewport, it's not really ideal.
Does anyone know if this is a browser issue and/or if there's a way to work around this?
Thanks!
You can use padding-top on the before pseudo element to get the same effect as if you would have used an image.
div img {
height: auto;
width: 100%;
}
The image will fill the container with its proper aspect ratio.
I think that by using float and let the image-container always be 20vh could be a possible solution in your case.
html, body {
height:100%;
margin: 0;
}
.card-container {
height:20vh;
display:inline-block;
background-color:red;
position: fixed;
bottom: 0;
width: 100%;
background-color:lightgray;
}
.cards{
height: 20vh;
display: inline-block;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.cards:after{
content:"";
display:block;
clear:both;}
.cards img {
display: block;
float: left;
height:100%;
width:auto;
padding:0 2px;
}
<div class="card-container">
<div class="cards">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
<img src="http://lorempixel.com/100/150/">
</div>
</div>
Im trying to make a situation where, when one element is hovered over, a different element is transitioned. I typically use the exact code as below and it works fine, but somethings wrong this time around apparantly.
CSS
#sidebar {
width:300px;
height:100%;
position:fixed;
top:0px;
padding:10px;
left:0px;
background:#fff;
font-style:none;
-webkit-transition: width 2s;
transition: width 2s;
z-index:1;
}
#sideimage {
max-width: 150px;
height: 150px;
border-radius: 50%;
background: #111;
position: absolute;
top: 290px;
left: 25%;
}
#sideimage:hover #sidebar {
width: 700px;
}
If anybody can tell me what I'm doing wrong or give me another solution, that'd be very much appreciated.
Link to the page
Well your css doesn't make much sense.
#sideimage is a child of #sidebar so #sideimage:hover #sidebar won't ever work.
You cannot change a parent element based on a child's event without javascript.
You should give us more details on what you are trying to achieve exactly.