I am using angular and bootstrap4, I have few rows inside the divs
How do I keep line1 text always at the same height so that if any div has a line0 then all the line1 text in all divs will go down and remain always in the same line?
<div *ngFor="let account of clientAccounts" >
<h6 class="card-title customCardTitle">{{ account.number }}</h6>
<h1 class="card-subtitle"> {{ account.cash }} </h1>
</div>
so if account.number has more then 0 lines then account.cash is not aligned horizontally , this is what I am missing.
.customCardTitle has white-space: pre-line
at the end I need to prevent this, and keep cash information in the same line
Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs
align-items-center will center the content inside cols
<div class="container">
<div class="row align-items-center">
<div class="col-3"><span>test</span></div>
<div class="col-3"><span>test</span></div>
</div>
</div>
Now code will center the text vertically, But within the container height. It won't be center to your html page.
To make Your text to center of your page, make row div to full height 100vh
.wrap{
display: flex;
justify-content: center;
align-items: stretch;
}
.card{
display: flex;
justify-content: center;
flex-direction: column;
width: 400px;
background: gray;
margin: 10px;
padding: 20px;
color: #FFF;
}
.card-title{
flex: 1;
}
<div class="wrap">
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco)</h6>
<h1 class="card-subtitle">$ 1,557</h1>
</div>
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</h6>
<h1 class="card-subtitle">$ 2,357</h1>
</div>
<div class="card">
<h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua</h6>
<h1 class="card-subtitle">$ 557,256</h1>
</div>
</div>
Related
I made a few 400x300 pixel image. Each of them contains a letter with a border around them. If I open in mobile browser the the image is bigger than the screen. I tried it in Chrome, Firefox, Opera browser, same results. The problem only exists on mobile phone. No problem on desktop computer even in responsive view.
If I set a lower minimum value, let's say 300px, then the picture fit to the display.
grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
My phone's display is 720px wide so I don't know why the right side is not visible if I set it to 400px.
I uploaded the html to this website
On my phone this is the result
My goal is to fit the content to the display on any phone without scrolling.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
background-color: gray;
}
.container{
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(400px,1fr));
width: 100%;
}
.card{
background-color: lightgray;
}
.card img{
display: block;
width: 100%;
/* object-fit: contain; */
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="a.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="b.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="c.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="d.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card">
<img src="e.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html>
.card img{
display: block;
width: 100vw;
}
Using vw (viewport width) will fix this problem.
(Or you can also remove the initial-scale=1.0 from your viewport meta tag.)
I created a list of cards using grid. The CSS:
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid > article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid > article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
The HTML:
<div id="app" class="container">
<div class="grid">
<article v-for="tool in tools">
<div class="title">
<h3>{{capitalizeFirstLetter(tool.name)}}</h3>
</div>
<div class="description">
{{tool.description}}
</div>
</article>
</div>
</div>
How do I keep up to 3 cards per row? I can't seem to understand how should I treat the grid so I will keep maximum 3 cards per row. For example I have 8 elements, then It will be:
card card card
card card card
card card
Change grid-template-columns property auto-fill to 3.
body {
padding: 40px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(280px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid>article {
border: 1px solid #ccc;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}
.grid>article img {
max-width: 100%;
}
.grid .text {
padding: 20px;
}
<div id="app" class="container">
<div class="grid">
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
<article>
<div class="title">
<h3>Title</h3>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</article>
</div>
</div>
I'm having a problem when I am trying to make a horizontal scroll when the grid complete four columns. See
#series {
display: grid;
grid-gap: 16px;
overflow-x: scroll;
padding: 16px;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: column;
}
Using this I get below output
But, you know, I want to get same like "four columns" and a scroll bar for see more.
What's the problem.
Try it with this:
display: grid;
grid-gap: 16px;
padding: 16px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
grid-auto-flow: column;
grid-auto-columns: minmax(160px,1fr);
overflow-x: auto;
grid-auto-flow: column; will force the grid to add your elements as column instead of following the free space.
grid-auto-columns: minmax(160px,1fr); the items added outside the viewport do not match auto-fit, so they won't get the size defined in your template. So you have to define it again with grid-auto-columns.
overflow-x: auto; auto will add the scrollbar
Horizontal scrolling containers the right way! Source
:root {
--gutter: 20px;
}
.app {
padding: var(--gutter) 0;
display: grid;
grid-gap: var(--gutter) 0;
grid-template-columns: var(--gutter) 1fr var(--gutter);
align-content: start;
}
.app > * {
grid-column: 2 / -2;
}
.app > .full {
grid-column: 1 / -1;
}
.hs {
display: grid;
grid-gap: calc(var(--gutter) / 2);
grid-template-columns: 10px repeat(6, calc(50% - var(--gutter) * 2)) 10px;
grid-template-rows: minmax(150px, 1fr);
overflow-x: scroll;
scroll-snap-type: x proximity;
padding-bottom: calc(.75 * var(--gutter));
margin-bottom: calc(-.5 * var(--gutter));
}
.hs:before,
.hs:after {
content: '';
}
/* Hide scrollbar */
.hide-scroll {
overflow-y: hidden;
margin-bottom: calc(-.1 * var(--gutter));
}
/* Demo styles */
html,
body {
height: 100%;
}
body {
display: grid;
place-items: center;
background: #456173;
}
ul {
list-style: none;
padding: 0;
}
h1,
h2,
h3 {
margin: 0;
}
.app {
width: 375px;
height: 667px;
background: #DBD0BC;
overflow-y: scroll;
}
.hs > li,
.item {
scroll-snap-align: center;
padding: calc(var(--gutter) / 2 * 1.5);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #fff;
border-radius: 8px;
}
<div class="app">
<h1>Some headline</h1>
<div class="full hide-scroll">
<ul class="hs">
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
<li class="item">test</li>
</ul>
</div>
<div class="container">
<div class="item">
<h3>Block for context</h3>
</div>
</div>
</div>
try this:
.container{
display: grid;
grid-auto-columns: max-content;
grid-template-rows: 1fr;
width: 100%;
overflow-x: auto;
}
.child{
grid-row: 1;
grid-column: auto;
}
Your problem is that you are using 1fr unit. Instead put 25% (use calc to accommodate for any gaps). This will size your columns relative to available screen width. Of course you must apply 25% to grid-auto-columns also.
I faced a similar issue recently and none of the answers seemed to solve this the way I needed.
Here's my take on this:
body {
background-color: #e2e2e2;
}
h1,
h2 {
text-align: center;
}
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user that there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the elements and the scrollbar. */
--scrollbar-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scrollbar-padding);
margin: 30px 0;
}
.cols-5,
.desktop-cols-5 {
--visible-cols: 5;
}
.cols-3 {
--visible-cols: 3;
}
.hint-next {
--col-hint: 20px
}
#media (max-width: 1024px) {
.laptop-cols-3 {
--visible-cols: 3;
}
}
#media (max-width: 767px) {
.tablet-cols-2 {
--visible-cols: 2;
}
.tablet-hint-next {
--col-hint: 15px
}
}
#media (max-width: 425px) {
.mobile-cols-1 {
--visible-cols: 1;
}
.mobile-hint-next {
--col-hint: 10px
}
}
.card {
display: flex;
flex-flow: column nowrap;
background-color: lightblue;
justify-content: center;
align-items: center;
padding: 10px;
border-radius: 10px;
min-height: 250px;
overflow: hidden;
}
.card-title,
.card-desc {
flex: 1;
border-radius: 10px;
}
.card-title {
font-size: 1.2em;
font-weight: bold;
}
.card-desc {
padding: 20px;
background-color: orange;
}
<div class="main">
<h1>CSS Grid - Scrollable Horizontal Layout Example</h1>
<h2>4 Columns</h2>
<div class="cards">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h2>3 Columns - Hint Next</h2>
<div class="cards cols-3 hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
<h1>Responsive Example</h1>
<h2>Desktop - 5 Columns</h2>
<h2>Laptop - 3 Columns</h2>
<h2>Tablet - 2 Columns - Hint Next</h2>
<h2>Mobile - 1 Column - Hint Next</h2>
<div class="cards desktop-cols-5 laptop-cols-3 tablet-cols-2 tablet-hint-next mobile-cols-1 mobile-hint-next">
<div class="card">
<div class="card-title">Card 1</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 2</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 3</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 4</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 5</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 6</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 7</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 8</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 9</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="card">
<div class="card-title">Card 10</div>
<div class="card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>
</div>
The important bit being:
.cards {
/* How many columns to show. */
--visible-cols: 4;
/* Gap between columns. */
--col-gap: 20px;
/* How much to show of the next hidden column. You can use this as a hint to show the user there are more scrollable items. Particularly helpful for mobile devices where the scrollbar gets hidden by default.*/
--col-hint: 0px;
/* Whitespace between the slider and the scrollbar. */
--scroller-padding: 20px;
/* Calculated column size. */
--col-size: calc((100% / var(--visible-cols)) - var(--col-gap) - var(--col-hint));
display: grid;
grid-auto-flow: column;
grid-template-columns: var(--col-size);
grid-auto-columns: var(--col-size);
overflow-x: auto;
overflow-y: hidden;
grid-gap: var(--col-gap);
padding-bottom: var(--scroller-padding);
}
It can be very easily made responsive by adjusting the relevant CSS properties for each screen size. I have included a responsive example as well.
You can also check this as a codepen here: https://codepen.io/amyriounis/pen/VwyydGj
I think this medium article has the answer:
https://uxdesign.cc/creating-horizontal-scrolling-containers-the-right-way-css-grid-c256f64fc585
Basically it comes down to the fact that the individual cards need to have a fixed width instead of a dynamic one, in order to force the browser to not squish them together.
I'm trying to create a simple design, image on top, text underneath. I'm using flexbox.
I want to keep the images the same ratio so I'm using the padding top aspect ratio hack to do so, that works well.
What I'm struggling with is getting the text box beneath the image to take up the rest of the remaining space in the container. I was hoping that flexbox would make this easy but I think using it in conjunction with the aspect ratio hack is causing issues.
Here's a fiddle of the basic layout https://codepen.io/anon/pen/NEqdyN. Can anyone help me make each of the red boxes expand to fill the remaining height? I also need to add a border radius the bottom of each corner so I can't use the overflow hidden method.
Thanks in advance!
Code below
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
CSS
body {
margin: 0;
}
.container {
display: flex;
}
.card {
width: 30%;
margin: 0 1%
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px
}
It should work by defining a flex container on each card and using flex: 1 0 auto on text blocks.
.card {
display: flex;
flex-direction: column;
}
.text {
flex: 1 0 auto;
}
Demo
body {
margin: 0;
}
.container {
display: flex;
}
.card {
display: flex;
flex-direction: column;
width: 30%;
margin: 0 1%;
}
.image-wrapper {
height: 0;
padding-bottom: 56.25%;
position: relative;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.text {
background: red;
padding: 20px;
flex: 1 0 auto;
}
<div class="container">
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<div class="card">
<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150?Text=Image">
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
</div>
My #services div has content wrapped inside, but when I wanna give display it's borders or give it a background, it appears as an empty div. What's the trick here? Looks like it works well in the snippet, but here is the way it appears: http://laszlovaszi.com/yoursite/ .Thanks in advance!
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
}
#services p {
margin-top:25px;
}
.separator2 {
width: 100%;
margin: 20px auto 15px;
position: relative;
height: 1px;
background-color:#d3d3d3;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="services">
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="row">
<h1>Our Team</h1>
<div class="separator2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</row>
</div>
</div>
After correcting your markup (amending the </row> tag to a </div>), I noticed your wrapping #services div appears to be collapsing due to its floated children. Add a clearfix class to it as below:
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
}
#services p {
margin-top:25px;
}
.separator2 {
width: 100%;
margin: 20px auto 15px;
position: relative;
height: 1px;
background-color:#d3d3d3;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="services" class="cf">
<div class="col-sm-8 col-sm-offset-2 text-center">
<div class="row">
<h1>Our Team</h1>
<div class="separator2"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="col-md-4 service">
<div class="img-responsive">
<img src="photos/service.jpeg" alt="Service">
</div>
<div class="service_description">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>
You'll notice now, the #services div has its height reinstated (before it just had a 2px height due to the border).
Clearfix micro hack: http://nicolasgallagher.com/micro-clearfix-hack/
More info: What is a clearfix?
You need to use float property to achieve so
#services {
border:1px solid red;
margin-top:50px;
background-color:#f1eee9;
float:left;
width:100%:
}
Also you can add width attribute if you want to.