I would like to have all my .element at the same height and the image vertical align middle if it's too small to be full size.
I tried so many things but I can't find the solution
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
You can add display: flex, flex-direction: column and flex: 1 on element, inner and col-3. To make img centered you can use margin-top and margin-bottom auto.
.col-3,
.element,
.inner {
display: flex;
flex-direction: column;
flex: 1;
}
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
}
.element img {
margin-top: auto;
margin-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
You can use the new Bootstrap 4 flexbox utilities and reduce all the extra CSS..
http://www.codeply.com/go/LBkyWJzTrT
<div class="row">
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
<div class="col-3 align-items-center">
<div class="element d-flex h-100 flex-wrap justify-content-between">
<div class="inner d-flex flex-wrap align-self-center justify-content-center">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
<p>Some text</p>
</div>
<a href class="align-self-end w-100">Link</a>
</div>
</div>
</div>
http://www.codeply.com/go/LBkyWJzTrT
Do you want like this, just added position styling. But with this you also have to write media-query styling.
.element {
border: 10px solid #e6e6e6;
margin-bottom: 20px;
height: 225px;
position: relative;
}
.element .inner {
padding: 15px;
}
.element .inner p {
margin-bottom: 5px;
text-align: center;
}
.element a {
background-color: #424753;
color: #fff;
display: block;
height: 30px;
padding-top: 3px;
text-align: center;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
<div class="col-3">
<div class="element">
<div class="inner">
<img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
<p>Some text</p>
</div>
<a>Link</a>
</div>
</div>
</div>
Related
I was creating a layout which worked in the latest updated browsers (Firefox, Chrome, ...) and then opened the layout in IE 11 and saw a difference. My layout in IE looks like this:
But in every other tested browser the space on the right sided divs is evenly between them, which means that the third div stays on the bottom, while the second divs is right in the middle. I can't get it working in IE 11 and hoped that someone from here has a good advice.
https://jsfiddle.net/1gq2cj3f/2/
<article class="col-12 content-wrapper">
<div class="row content-wrapper-materials">
<div class="col-12 col-lg-6 materials-sectors">
<div class="card materials-sectors-general">
<div class="row no-gutters">
<div class="col-12">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="568px" height="430px">
</a>
</div>
<div class="card-img-overlay">
<h3 class="card-title">
Allgemein </h3>
</div>
</header>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 materials-sectors">
<div class="materials-sectors-specific">
<div class="card specific-construction">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-healthcare">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
<div class="card specific-ict">
<div class="row no-gutters">
<div class="col-12 col-sm-4">
<header class="card-header">
<div class="card-image">
<a href="...">
<img class="card-img-top" src="..." alt="" width="190px" height="117px">
</a>
<div class="card-img-overlay">
<h3 class="card-title">
Headline </h3>
</div>
</div>
</header>
</div>
<div class="col-12 col-sm-8">
<div class="card-body" itemprop="description">
<p class="card-text">
Text </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
.content-wrapper > div {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
padding-top: 8rem;
padding-bottom: 8rem;
}
.card > * {
flex: 0 0 auto;
}
.materials-sectors .card-header {
height: 100%;
padding: 0;
border-bottom: 0;
background-color: rgba(242, 241, 241, 1) !important;
}
.materials-sectors .card-image {
height: 100%;
}
.materials-sectors .card-img-top {
-o-object-fit: cover;
object-fit: cover;
}
.materials-sectors-general .card-img-overlay {
bottom: 2rem;
padding: 0.75rem;
}
.materials-sectors .card-img-overlay {
background-color: rgba(255, 255, 255, 0.25);
top: auto;
}
.card-img-overlay > h3 {
font-size: 1rem;
margin-bottom: 0;
}
.materials-sectors-specific {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.materials-sectors-specific > .card {
height: 100%;
}
.materials-sectors-specific .card-image {
display: block;
}
.materials-sectors-specific > div:nth-of-type(2) {
margin-top: 1rem;
margin-bottom: 1rem;
}
Need to align four different height (beetween 160-180px) svg images with text under them.
Images should be placed in line at sight and I don't know how to make strict align short text under them in one line like on screenshot.
Thanks!
UPD: Sorry for inconvinient information, thought that this question is quite typical for those who know css good.
Here is my html and css. Also I'm using bootstrap rows.
<div class="did-you-know">
<div class="row items">
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-wa.svg"/>
</div>
<div class="title text-poppins">
<p>We’re from WA</p>
<p>{like you!}</p>
</div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-packaging.svg"/>
</div>
<div class="title text-poppins">
<p>We use minimal packaging</p>
<p>{great for the planet}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-quality.svg"/>
</div>
<div class="title text-poppins">
<p>We only choose quality</p>
<p>{better for your health}</p></div>
</div>
<div class="col-lg-3 col-xs-6">
<div class="icon">
<img src="/img/mswa/inline-community.svg"/>
</div>
<div class="title text-poppins">
<p>We love giving back</p>
<p>{great for our community}</p></div>
</div>
</div>
</div>
.did-you-know {
padding: 20px;
text-align: center;
}
.did-you-know .items .icon {
padding: 50px;
}
.did-you-know .items .title {
font-size: 20px;
}
here is a solution:
Replace images by your images.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 25%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
<p style='text-align: center;'>test1</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
<p style='text-align: center;'>test2</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
<div class="column">
<img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
<p style='text-align: center;'>test3</p>
</div>
</div>
</body>
</html>
I'm trying to generate a layout which has varying number of divs, I.e.
| Large | Large |
|Small | Small | Small |
| Large | Large |
...
Large divs will have 50% width, whereas smaller one's will have 33%.
How can I go about this? I'm floating the div's so that they're in a row, but unsure on how I can get three smaller divs, below the larger ones, whilst still ensuring everything is central?
Current approach:
.case-card--large {
width: 50%;
float: right;
}
.case-card {
float: right;
text-align: center;
padding: 40px;
width: 33%;
border: 1px solid blue;
}
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
Here is my solution.
I have used display:inline-block for each box
* {
box-sizing: border-box;
}
.container {
font-size: 0; /* to remove space betwen inline elements*/
}
.wrapper {
font-size: initial;
}
.case-card {
text-align: center;
padding: 40px;
width: calc(100% / 3);
border: 1px solid blue;
display: inline-block;
}
.case-card--large {
width: 50%;
}
<div class="container">
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
</div>
You can work with a CSS technique: flex (MDN docs).
Put those elements in a parent container, set its width and make it behave as a flex-box by using display: flex. Here below is an example of how I did it. The CSS rules below the /* show case rules below */ are used to have a visual result of what you can have by using flex boxes.
#cont {
display: flex;
flex-direction: row;
width: 600px;
flex-wrap: wrap;
justify-content: space-between;
}
.case-card {
width: 33%;
box-sizing: border-box;
/* show case rules below */
background-color: red;
border: 1px solid black;
}
.case-card--large {
width: 50%;
/* show case rules below */
background-color: yellow;
}
<div id="cont">
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
</div>
edit: I have used justify-content: space-around; first which aligns the elements with width: 33% somewhat nicely in the middle towards each other. Changing that to justify-content: space-between; ensures that the outer boxes are aligned to the same border as the container which may appeal the OP more. Credits for D.Schaller
You need to include box-sizing:border-box because you are using padding or to put width as width: calc(33% - 80px), also .large class create as subclass or otherwise in your case put !important, because now doesn't work and everything is width 33%
body{
text-align:center;
}
.case-card {
box-sizing: border-box;
display:inline-block;
text-align: center;
padding: 40px;
width: 33.33%;
border: 1px solid blue;
margin: 0 -2px;
}
.case-card.large{
width: 50%;
}
<div class="case-card large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
Ok.. So I made little modification in the code and it works quite fine. Hope it helps you out.
Instead of float:right I used
float:left
and added the border to the wrapper class.
https://codepen.io/anon/pen/oMWMBE
.case-card--large {
width: 50%;
float: left;
text-align: center;
}
.wrapper { border: 1px solid blue; }
.case-card {
float: left;
text-align: center;
width: 33.33%;
}
<div class="case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
I have problem with 3 object in one row there is text between two images on the desktop it show this http://www.part.lt/img/d3aabc6dea1cafd939b9cda8152403a5633.jpg on mobile looks great, i need solution any help ?
my code:
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
<div class="header_title">
<h2 class="align-right">åpnes i<br/>
eller<br/>
åpne ut
</h2>
</div>
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
css
.header_title {
margin:90px auto 0px;
width: 32%;
text-align: center;
padding: 0px;
}
.header_title h2 {
font-family: 'Arimo', sans-serif;
font-size: 73px;
color: #004657;
}
Try to add columns since you using boostrap.
<div class="col-sm-5">
<div class="pull-left hidden-xs">
<img src="images/head_window.png" class="img-responsive">
</div>
</div>
<div class="col-sm-2">
<div class="header_title">
<h2 class="align-right">åpnes eller åpne ut</h2>
</div>
</div>
<div class="col-sm-5">
<div class="pull-right hidden-xs">
<img src="images/head_window2.png" class="img-responsive">
</div>
</div>
I have a jsfiddle here - http://jsfiddle.net/gomwyt2j/1/
Super simple, I just need to center the text vertically so it lines up with the button
Nothing I try seems to work
<div class="container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text"><p>Some Info</p></div>
<div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
<div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a></div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text"><p>Some Info</p></div>
<div class="col-sm-4 text-center text"><p>Some more Info Her</p></div>
<div class="col-sm-3 text-center"><a class="btn">Read More</a></div>
<div class="col-sm-1"></div>
</div>
</div>
One possible solution is to use line: height:
html
<div class="container">
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text">
<p>Some Info</p>
</div>
<div class="col-sm-4 text-center text">
<p>Some more Info Her</p>
</div>
<div class="col-sm-3 text-center btn-btn"><a class="btn">Read More</a>
</div>
<div class="col-sm-1"></div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-3 text-center text">
<p>Some Info</p>
</div>
<div class="col-sm-4 text-center text">
<p>Some more Info Her</p>
</div>
<div class="col-sm-3 text-center"><a class="btn">Read More</a>
</div>
<div class="col-sm-1"></div>
</div>
</div>
css
.row {
background: gray;
color: white;
padding: 5px 0;
margin: 0 0 10px 0;
}
.text p {
display: inline-block;
//padding: 9px 0 0 0;
vertical-align: middle;
}
.btn-btn {
}
.btn {
background: red;
color: white;
padding-top: 10px;
padding-bottom: 10px;
vertical-align: middle;
}
.col-sm-3, .col-sm-4 {
line-height: 35px; /*add line height*/
}
p {
margin: 0;/*remove margin from p*/
}
fiddle