I have a container with 2 divs in it, image left 50% and text right 50%. The text section has a read more link that will expand it's containing div giving both the image and text more height, like so -
Closed
Open
div.feature {
display: flex;
flex-flow: row wrap;
justify-content: center;
width: 100%;
}
div.feature>div.feature-image {
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div.feature>div.feature-image,
div.feature>div.feature-description {
float: left;
width: 50%;
}
<div class="feature">
<div class="feature-image" style="background-image: url('http://cablelabs.dev/wp-content/uploads/2017/07/Smart-Drugs-banner.jpg');"></div>
<div class="feature-description">
<div class="featured-description-container">
<h3>Smart Drugs/Meds</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<div class="slidingDiv" style="display: block;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="read-more-button-container">
Read Less
</div>
</div>
</div>
</div>
I am using flex to achieve this functionality. This works on a full screen but when it goes down to smaller screen sizes the height of the image is 0. Can anyone help explain why the image isn't showing on smaller screens?
Related
I'm trying to make a specific div scrollable without making the entire page scroll. There are different elements in the page. The scroll div will not have a defined height, but its height should be based on its contents. Here's the layout:
I tried many things:
adding overflow: auto/scroll to the scroll div and giving it a 100% height
made the scroll div an absolute position
Nothing seems to work. How can I make an inner div scrollable without giving it a height in px?
You need some rule to impose a fixed or max-height on the element to ensure it hits a point where it wants to scroll. Then you can add an overflow-y: scroll style. An example with box 3:
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 15vw);
grid-template-rows: repeat(3, 25vh);
justify-content: center;
align-content: end;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.item1 {
grid-column: 1 / 5;
}
.item2 {
grid-column: 1 / 3;
grid-row: 2 / 4;
}
.item3 {
grid-column: 3 / 5;
overflow-y: scroll;
}
<div class="wrapper">
<div class="box item1">One</div>
<div class="box item2">Two</div>
<div class="box item3">
Three Three Three Three Three Three Three Three Three
</div>
<div class="box item4">Four</div>
<div class="box item5">Five</div>
</div>
In order to scroll the inside-div, the height of the inside-div needs to be defined, like here:
.div-outside {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100vw;
height: 100vh;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #FF2424;
}
.div-inside {
position: static;
overflow: auto;
width: 30%;
height: 30%; /* <--- Defined height needed for scrolling */
background-color: #3D24FF;
}
<div class="div-outside"><div class="div-inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
If the height of the inside-div is not defined, the inside-div grows with its content/text, like here:
.div-outside {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100vw;
height: 100vh;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #FF2424;
}
.div-inside {
position: static;
overflow: auto;
width: 30%;
background-color: #3D24FF;
}
<div class="div-outside"><div class="div-inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></div>
I have a CSS grid layout as follows here: https://codepen.io/anon/pen/KogEaq
body {
overflow: hidden;
padding: 0;
margin: 0;
background-color: #222525;
color: white;
}
#container {
display: grid;
grid-template-columns: 27fr 78fr;
max-height: 100vh;
}
#left {
grid-row: 1;
grid-column: 1;
}
#right {
grid-row: 1;
grid-column: 2;
max-height: 100%;
}
.box {
margin: 8px;
padding: 8px;
border-radius: 10px;
border: blue solid 2px;
overflow-y: auto;
max-height: 100%;
}
<div id="container">
<div id="left">
<div class="box">
Navigation sidebar stuff here
</div>
</div>
<div id="right">
<div class="box">
Page content
</div>
</div>
</div>
The page is intended to be a single page app and the body should not scroll. When the page content becomes large, I wish for the contents in the .box class to scroll.
The problem is, the .box and the parent #right column within the #container grid seem to exceed the max-height set by the container of 100vh, therefore the overflow property of the .box is not triggered and the content is cut short.
Edit:
If I wasn't clear before, the problem is that the .box and the #right elements do not respect the max-height attribute of the parent #container which is causing the scroll issues.
The problem isn't really the max-height. It's the top and bottom margins on your .box element (margin: 8px). When added to the max-height: 100vh, it results in an overflow of the wrong container. If you remove those margins, and add box-sizing: border-box (to factor in borders and padding), your page and the overflow work as intended.
body {
margin: 0;
background-color: #222525;
color: white;
}
#container {
display: grid;
grid-template-columns: 27fr 78fr;
}
#left {
grid-row: 1;
grid-column: 1
}
#right {
grid-row: 1;
grid-column: 2;
}
.box {
/* margin: 8px; */
padding: 8px;
border-radius: 10px;
border: aqua solid 5px;
max-height: 100vh;
overflow: auto;
}
li {
margin: 10px;
}
* { box-sizing: border-box; }
<div id="container">
<div id="left">
<div class="box">Navigation sidebar stuff here</div>
</div>
<div id="right">
<div class="box">
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ul>
</div>
</div>
</div>
As a solution, try padding: 8px on the parent elements (#right and #left) instead.
I'm looking for a better to a solution to the problem of not having enough content to fill the screen.
Usually, if you want to fill the screen you either make the HTML, body heights 100% and then your container 100% or just use 100vh like in my JSFiddle below.
The problem is if the content does eventually stretch past 100% height of the screen it gets cut off.
I was wondering if there was a way (maybe with flexbox) where you could have 100% height but also if the content goes past 100% the container expands in size.
html, body
{
padding: 0;
margin: 0;
}
.content
{
background: grey;
/* height: 100vh; - this works but if content goes past 100vh it gets cut off */
}
<div class="content">
<span>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</div>
Use a container around the content to which you apply 100vh and display: flexand now the content can be made a column flexbox - see demo below and updated fiddle:
html,
body {
padding: 0;
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
}
.content {
background: grey;
display: flex;
flex-direction: column;
}
<div class="wrapper">
<div class="content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
You are just missing the overflow: auto; in your .content div
Your Fiddle updated
body {
padding: 0;
margin: 0;
height: 100%;
}
.content {
background: grey;
height: 100%;
overflow: auto;
}
Can someone help me understand why Chrome but not Firefox is able to display the background image of the tree on the right side and how to fix: www.eye45.com
When the web browser is contracted, both
<div class="col-sm-6 left-side">
<div class="col-sm-6 right-side">
are supposed to maintain the same height until
#media (max-width: 780px) {} and then the tree image is supposed to flip under the purple paragraphs and reduce to a height of 200px.
It works perfect in Chrome, but not Firefox.
Adding style with display as table will fix this for firefox.
.right-side {
display: table;
}
Add style="display:table"
<div class="col-sm-6 right-side" style="display: table;">
</div>
Try using equal height columns bootstrap css in your code.
Reference : http://getbootstrap.com.vn/examples/equal-height-columns/
.left-side {
background: #bbb4e5 none repeat scroll 0 0;
color: #fff;
display: table-cell;
padding: 2%;
}
.right-side {
background: url("https://s3.amazonaws.com/igd-wp-uploads/2014/05/Perfei%C3%A7%C3%A3o-Igni%C3%A7%C3%A3o-Digital.jpg") no-repeat 50% center / cover ;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
<div class="col-sm-6 left-side">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div class="col-sm-6 right-side">
</div>
</div>
Here is demo : http://codepen.io/anon/pen/jrJBzz
it's a height problem in chrome browser. use this
.right-side {
min-height: 500px;
}
I have a grid with one div taking up around 30% and the other 70%. In the 30% div, I have 4 images stacked vertically. In the 70% div I have content. How could I dynamically resize and crop the 4 images equally so they equal the height of the 70% content div. I know I could resize the images manually, but I'd like them to auto-adjust if content is added or removed. Also, the design is responsive. Here is a jsfiddle:
http://jsfiddle.net/fETtm/
Here is my HTML:
<section>
<div id="inner-content" class="wrap">
<aside class="fourcol first">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
<img src="https://www.slooh.com/images/signup/m42_png_sm.png">
</aside>
<article class="eightcol">
<h3>H3 Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
Thank you for any help.
overflow: hidden will cut anything outside the element it is applied (here .wrap your container).
Demo: http://jsfiddle.net/fETtm/1/
By removing your images from the flow (position: absolute), only the right column is still in the flow and will define the size of its container. Now any bit of image that is outside this box won't be displayed.
As the left column was removed from the flow, your text now occupies the whole width of its container so it needs padding-left (same value as the width of your images).
HTML: same as yours
CSS:
.wrap {
position: relative;
overflow: hidden;
outline: 1px dashed purple;
max-width: 1140px;
width: 96%;
margin: 0 auto;
}
.fourcol {
width: 31.491712705%;
position: absolute;
}
.eightcol {
width: 65.74585634900001%;
position: relative;
float: left;
margin-left: 2.762430939%;
padding-left: 31.491712705%;
}
.first {
margin-left: 0;
}