I have created a sample page with a fixed background. I want the page to lighten up as the page is scrolled down.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)), url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
Instead, in my current code, the top of the screen is dark and the bottom is light. It doesn't get lighter as the page is scrolled down.
I want to achieve this effect:
https://www.wix.com/website-template/view/html/1896?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button&esi=c5ca042c-26c4-41cb-bc5f-01e47031976d
Your mistake is that you did a gradient from black to white, while you actually need a gradient from fully transparent white to almost opaque white to lighten your content.
In the snippet below, I changed the body linear-gradient to achieve the expected result :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*Removed linear gradient from this background-image or else the gradient wouldn't 'lighten' the content on scroll */
background-image: url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
/* Added linear-gradient */
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8015405991498161) 40%, rgba(255,255,255,0.8) 100%);
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
right: 10px;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
display: inline-block; /* Changed display property to avoid the element having full width */
background-color: white;
/* float: right; Removed so it doesn't break the content display */
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
Related
I have text between 2 block float elements and I want to add an additional indentation to the right for a quote id element inside the p paragraph. The problem is that margin-left doesn't work next to a float element and if I use the position: relative method, like in the shown example, then the text will clip the right float block. Is there a way to move the quote text to the right without the clipping?
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
Edit:
For an exact example you can look at en.wikipedia.org/wiki/Hercules at the line Tacitus records a special affinity of the Germanic peoples for Hercules. In chapter 3 of his Germania, Tacitus states: You can see that the indented text that follows is essentially between 2 floating images.
The margin is correctly applied.
The problem is that your block is before in your html and it you should be after.
So, for what you are trying to achieve it is better to use display:flex
So I restructure your html, by placing a "container" and applying the flex.
Then, I put all your p into a div and place the right block below.
As you added a left to your #quote you need to adjust width of it too.
So I could remove your float.
DEMO
#left-block{
height: 150px;
width:50px;
/*float: left;*/
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
/*float: right;*/
background-color: #000;
margin-left: 10px
}
#quote{
position: relative;
left: 30px;
width: calc(100% - 30px);
}
.d-flex{
display:flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="d-flex">
<div id="left-block"></div>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?</p>
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
<p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</div>
<div id="right-block"></div>
</div>
</body>
</html>
You can use a margin, but the value has to be larger than the width of the floated elements, since the margin is measured from to side of the parent element, not taking the floated element into account:
(no need for relative position BTW)
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
margin: 0 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
So the solution that isn't perfect but works, is to simply add overflow: hidden in to the quote element. The explanation seems to be written here
https://stackoverflow.com/a/18718157/18429900
The only issue with this is that it doesn't move the text to the left once it goes lower than the block height as show in the example below.
#left-block{
height: 150px;
width:50px;
float: left;
background-color: #000;
margin-right: 10px
}
#right-block{
height: 150px;
width:50px;
float: right;
background-color: #000;
margin-left: 10px
}
#quote{
overflow: hidden;
padding-top: 40px;
padding-left: 40px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="left-block"></div>
<div id="right-block"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis?
<p id="quote">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem natus sit, reiciendis dolore accusantium mollitia in quia ipsa itaque iure, eaque nobis? Voluptate corrupti excepturi quaerat commodi, aut illo dolorum."</p>
Voluptate corrupti excepturi quaerat commodi, aut illo dolorum.
</p>
</body>
</html>
the h1 in the showcase area is getting on top of each other when i am trying to squeeze the window which is not supposed to behave in that way.But when it is not,, everything is fine. As i am new in this sector, i am not understanding what i've done wrong. Could anyone please show me where it needs to be fixed?
html:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<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>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
You have a few options here:
If you want to allow the title to stack for smaller screens you will need to make a small change to your css. I noticed that you have the following line in your css:
line-height: 1.6em;
Try changing this to
line-height:1.6;
Unitless line heights are typically recommended for use because this will allow the child elements to compute their line heights based on the font size specified.
Try reading the information here for more in-depth explanation
If you would like for the text to remain on one line when resizing the screen you can use media queries to change the font-size:
Based on your code I noticed that the font begins to stack at 1204px so try adding this:
#media screen and (max-width: 1204px) {
#showcase h1 {
font-size: 45px;
}
}
And then from here you can continue on to test the size of the screen and then add more breakpoints based on where the font begins to stack.
Personally I would add the style line-height: 55px; to the #showcase h1 element, so the height of the text is the same as the size of it.
This is going to be the final result:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
line-height: 55px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<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>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
Hope this helps.
I need to display a collection of tiles (laid out using flexbox), where each tile has an "expando" child that - on hover - is supposed to expand beyond the parent limit. This part works, except for z-index. This doesn't surprise me after all, as every tile make its own z-index stacking context. I am just lost of ideas how to solve it.
I would really need to make these tiles and their children self-contained (to be later extracted into an angular component).
HTML
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
CSS
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover .plate {
display: flex;
}
jsfiddle
You have to set z-index on .holder:hover.
.holder:hover {
z-index:10;
}
https://jsfiddle.net/hk149512/3/
You may need to change the z-index for the holder element on :hover, just add to your code:
.holder:hover {
z-index:10
}
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover {
z-index:10
}
.holder:hover .plate {
display: flex;
}
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
Here is my codepen with the problem : http://codepen.io/Golgota/pen/gwvGGj
And my CSS :
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
max-height:100%;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
I have 3 responsive div .bloc I would like to keep them at the same height. The problem comes from the images which have different sizes.
Is there a way to have 3 .bloc with the same height without changing the images' resolutions or scrolling ?
Cheers !
/* item styles */
.item-image {
position: relative;
overflow: hidden;
padding-bottom: 50%;
border: 1px solid #ddd;
}
.item-image img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.item-content {
padding: 15px;
background: #72cffa;
}
.item-text {
position: relative;
overflow: hidden;
height: 100px;
}
/* centering styles for jsbin */
html,
body {
width: 100%;
height: 100%;
}
html {
display: table;
}
body {
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Css aspect ratio to have images of same height</title>
<meta name="description" content="Css aspect ratio to have images of same height">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="item-image">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" class="img-responsive">
</div>
<div class="item-content">
<div class="item-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec velit nulla. Cras finibus mollis dolor, ac rhoncus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida iaculis orci eget malesuada. Morbi pulvinar, purus sit amet porta laoreet, quam orci fermentum leo, in interdum ligula elit id magna. Nam justo massa, ultrices eget dictum vitae, porttitor eget eros.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can use the object fit, but check the support first,
you can do this,
body {
background-color: orange;
padding: 5%;
margin: auto;
box-sizing: border-box;
}
.block-holder .bloc {
background-color: white;
float: left;
width: 32.66%;
padding: 10px;
height: 100%;
margin: 0;
}
.block-holder .bloc:not(:first-child):not(:last-child){
margin: 0 1%;
}
img {
width: 100%;
height: 50vh;
object-fit: cover;
}
*, *:before, *:after {
box-sizing: border-box;
}
<div class="block-holder">
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg" />
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
</div>
Try this. I just changed the image min-height into pixels rather than %.
body {
background-color:orange;
padding: 5%;
margin:auto;
}
.bloc {
background-color:white;
float:left;
width:100%;
margin: 10px;
padding: 10px;
height: 500px;
}
img {
max-width:100%;
min-height: 270px;
}
#media all and (min-width: 40em) {
.bloc {
float: left;
width: 31%;
margin: 10px;
height: 500px;
}
}
<div class="bloc">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg">
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://s11.favim.com/orig/160919/forum-communaute-topic-9808-hd-putlocker-watch-hell-or-high-water-online-full-movie-1080p-Favim.com-4740061.jpeg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
<div class="bloc">
<img src="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg"/>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita itaque ipsa sit quibusdam optio cumque labore necessitatibus. Eaque soluta ut excepturi rerum repudiandae harum nisi doloremque cupiditate exercitationem voluptatem tempora.
<p>
</div>
I have below code. Weave is
http://liveweave.com/JVtNIk
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<div class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quia voluptatem sequi ad iure obcaecati assumenda omnis aperiam ullam cupiditate possimus at ab sint! Dicta quisquam rem sunt aliquid inventore?</div>
<div class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quas ipsum minus perspiciatis est quam sit blanditiis harum rem similique eligendi suscipit voluptas ex placeat magnam quos amet! Est ut.</div>
<!-- End your code here -->
</body>
</html>
CSS is
* {
padding: 0;
margin: 0;
}
.box1 {
position: relative;
display: inline-block;
background: grey;
width: 200px;
height: 200px;
margin: 10px;
}
.box2 {
position: relative;
display: inline;
}
Please help me understand the reason why the box2 content is not starting from the top but quite from below ? is there any specific reason for that ? I can solve it by adding float but i am just curious on this behavior.
Please someone help me understand.
Thanks in advance
You have this behavior because the baseline of the .box1 is its last line of text. The .box2 starts on the same line as this last line so that explain why it is quite at the bottom. Then the inline attribute makes it continuing under the .box1 like if .box2 was in a <p> tag.
Hope you understood my explaination.