I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.
Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.
Here is my code:
<div class="row my-flex-card">
<div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body inline-block">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
<a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
</div>
</div>
<!--/.Card-->
</div>
</div>
My CSS:
.my-flex-card > div > div.card {
height: calc(100% - 15px);
margin-bottom: 15px;
}
.row {
margin-bottom: 50px;
}
That .row feature isn't working.
This is how my website looks like right now:
Thank you :)
.parent {
display: flex;
flex-direction: row;
padding: 10px;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width: 33%;
position:relative;
}
.parent .child .content {
height: 100%;
box-shadow: 0 0 1em gray;
}
.content img{
background-size:cover;
width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}
<div class="parent">
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 3</h3>
<p>text text text text text text text text text text text text text text text text text text text</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 2</h3>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
<div class="child">
<div class="content">
<div>
<img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
<h3> test 1</h3>
<p>text text text text text text text text text text text text tex</p>
</div>
<div><input type="button" value="click" /></div>
</div>
</div>
</div>
make the box class with position relative :
.boxClassName{
position:relative
}
then make the button class with the following :
.buttonClassName{
position:absolute;
bottom:0;
}
Related
I use splidejs to create a slider for image and text content. The size of the sliderList (ul) is based on the largest list item (sliderItem --> li).
Each SliderItem consists of a wrapper (item-wrapper), which contains an image and a text. Both the image and the text can be of different length/highness.
Now the SliderItems should be aligned so that each image element is above the text, but the texts are aligned at the bottom of the container (with a dynamic height) and each text starts at the same height. That is, the texts are all placed at the same height at the end of the container and the image should be placed directly above them with a defined margin. Is this somehow possible using SCSS? In case of need I can also use JS to reposition something if needed.
Attached is a mockup of how it should look:
Some code snippet:
HTML
<div class="splide">
<div class="splide__track">
<ul class="splide__list"> //Slider List
<li class="splide__slide"> //Slider Item
<div class="item-wrapper">
<div class="image">
<img/>
</div>
<div class="text">
<h2>Some text</h2>
Some other text
</div>
</div>
</li>
CSS
.splide {
width:100%;
height: 100%;
}
.splide__list {
display: flex;
.splide__slide{
.item-wrapper{
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 100%;
.image {
img {
width: 100%
height: auto
}
}
.text {
}
}
}
}
If you wanted to solve this placement with CSS then it has grid written all over it. Here's an example of what that solution would look like retaining your HTML structure.
ul {
display: grid;
grid-template-rows: 1fr 1fr;
grid-auto-flow: column;
grid-auto-columns: 1fr;
list-style: none;
margin: 0;
padding: 0;
}
.splide__slide,
.item-wrapper {
display: contents;
}
.image {
display: flex;
align-items: flex-end;
}
https://jsfiddle.net/yd0or3je/
Notice that the li and .item-wrapper had to be eliminated from the layout using display: contents and unless that slider js thingy is only manipulating the ul scroll position or something, it will probably no longer work after these changes.
Other than that you could use javascript to find the highest .image after the page loads and then apply the same height to all the .image elements.
Or the third option would be to just not use the slider js thingy and write some custom js for the slider while retaining the grid css for the layout.
Hope this helps you.
Your code snippet seems to have lost some material somewhere. However, if I have worked it out correctly, then the code example below I think satisfies the following requirements:
maintains your HTML structure (so it should still work with your
slider?)
aligns the boundaries between images and text
does not require javascript
The approach in the code below is to create a reference line for each image and text pairing which can also be referenced to an outer container. This is done by decoupling the layout flow for the image and the text from its parent using 'position'. Decoupling both elements from their shared parent results in the parent collapsing to an element with 0 height, ie, a "line", because it no longer has any layout content. This "line" can then be referenced back a common ancestor, for all image text pairs, again using 'position'.
.splide {
width:100%;
height: 100%;
}
.splide__list {
list-style-type: none;
display: flex;
flex-direction: row;
/* Establish common reference context */
position: absolute;
top: 50%;
}
.splide__slide {
}
.item-wrapper {
margin-left: 5px;
margin-right: 5px;
width: 20vw;
/* Establish image text pairing parent position reference */
position: relative;
}
.image {
border: 2px solid black; /* If the black border is not required, then remove this property */
padding: 5px;
/* Align the bottom of the image, and center the image */
position: absolute;
bottom: 5px;
left: 5px;
right: 5px;
}
img {
width: 100%;
}
.text {
border: 2px solid black; /* If the black border is not required, then remove this property */
padding: 5px;
/* Align the top of the text, and center the text */
position: absolute;
top: 5px;
left: 5px;
right: 5px;
}
.upperGreenBorder { /* If the lime border is not required, then remove this class */
border-left: 2px solid lime;
border-top: 2px solid lime;
border-right: 2px solid lime;
position: absolute;
top: -7px;
bottom: -7px;
left: -7px;
right: -7px;
}
.lowerGreenBorder { /* If the lime border is not required, then remove this class */
border-left: 2px solid lime;
border-bottom: 2px solid lime;
border-right: 2px solid lime;
position: absolute;
top: -7px;
bottom: -7px;
left: -7px;
right: -7px;
}
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="400px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=1">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 1</h2>
<p>Some other text for text number one Some other text for text number one Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
<p>Some other text for text number one</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="500px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=2">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 2</h2>
<p>Some other text for text number two Some other text for text number two Some other text for text number two</p>
<p>Some other text for text number two</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="200px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=3">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 3</h2>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
<p>Some other text for text number three</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="300px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=4">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 4</h2>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
<p>Some other text for text number four</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="400px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=5">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 5</h2>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
<p>Some other text for text number five</p>
</div>
</div>
</li>
<li class="splide__slide">
<div class="item-wrapper">
<div class="image">
<div class="upperGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<img height="50px" src="https://dummyimage.com/1400x600/ff4400/fff.png&text=6">
</div>
<div class="text">
<div class="lowerGreenBorder"></div><!-- If the lime border is not required, then remove this div -->
<h2>Some header text 6</h2>
<p>Some other text for text number six</p>
</div>
</div>
</li>
</ul>
</div>
You should set the height of all your splide elements to 100%. Inside your splide__slide, set the .image CSS class into height: 60% and .text class height: 40%, or whichever proportion you prefer. Then, turn the .image CSS class into a flex container and set the img element to be align-self: end. I tried matching your HTML and CSS. Here's a working version with imports for SplideJS:
https://jsfiddle.net/opLsgf9v/
Thanks for all your answers. I made it work by some hacky js:
First i need to wait for my document to be fully loaded calling
document.addEventListener('readystatechange', () => {
if (document.readyState === 'complete') {
this.calculateImages();
}
});
then i process every image and calculcate the tallest image (get the height of the tallest element in pixels). After this, i move every image by its height difference (difference actuall image to max height image) by applying the height difference with a margin-top. Thats it for me. I guess a bit hacky but it works.
issue
I am having issues with this layout. I want to position a picture of an app right in the center of these boxes. it is important that the image is visible over the top and under the bottom of background for the sections with text. I have tried everything both as background and as normal image (position, z-index, etc.).
I am using bootstrap for col and row. I also needs this to look beautiful on mobile. I need design to look at attached picture, but with the picture in the middle in front of the background. Any suggestions?
Current code and CSS:
<center>
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
<div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon"></div>
<div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon"></div>
<div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
<div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon"></div>
<div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon"></div>
<div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
</section>
</div>
</center>
.appicon_white {
width: 60px;
height: 60px;
}
.appfeatures {
background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}
.container_appfeatures {
width: 80%;
}
.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%;
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}
Don't use col-md-offset-4 just col-md-4 and your must use <div class="row"> in every row. Here I updated your html code:
<center>
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
<div class="col-md-3 col-sm-3 text-right">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon">
</div>
<div class="col-md-4"> </div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon">
</div>
<div class="col-md-3 col-sm-3 text-left">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
</div>
<img src="https://path to your iphone image">
<div class="row">
<div class="col-md-3 col-sm-3 text-right">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon">
</div>
<div class="col-md-4"> </div>
<div class="col-md-1 col-sm-1 text-center">
<img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon">
</div>
<div class="col-md-3 col-sm-3 text-left">
<h3 class="white">Headline</h3>
<br />text text text text text text text text text text text text text text text text text text
</div>
</div>
</div>
</section>
</div>
</center>
CSS code updated:
.appicon_white {
width: 40px;
height: 40px;
}
.appfeatures {
background: rgb(102, 204, 153);
background: linear-gradient(180deg, rgba(102, 204, 153, 1) 0%, rgba(30, 130, 76, 1) 100%);
opacity: 0.5;
margin: 170px 0;
position: relative;
}
.container_appfeatures {
width: 80%;
margin: 75px auto;
}
.margin50 {
width: 100%;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.margin50 img {
max-width: 250px;
width: 100%;
}
img.phone-middle {
position: absolute;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
Jsfiddle: https://jsfiddle.net/marksalvania/94uyLvp1/
then on your mobile/smaller view just add this on your media queries something like this:
.col-md-3 {
text-align:left;
font-size: 10px; /*just adjust this to your desired size*/
}
.col-md-1,
.margin50 {
display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}
.your-other-styles {
/*add your other styles here*/
}
I have this html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article style="border-left:1px solid #000;" class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
I want to add a vertical line between the columns that stretches all the way from the top of the card to the bottom.
adding the border:... style wont help as there is padding to the card class.
creating an element with the position:absolute doesn't help as this is a responsive page and everything needs to be dynamic
After searching around I haven't found any good pre made solutions so what I did was create a background image from the linear-gradient and set a background position made of percentage to make it dynamic as so:
.card{
background-color: #fff;
background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);
background-image: linear-gradient(180deg, transparent, #ccc, transparent);
background-position: 65%;
background-repeat: repeat-y;
background-size: 1px 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card" style="background-color: #fff;background-image: -moz-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -webkit-linear-gradient(180deg, transparent, #ccc, transparent);background-image: -o-linear-gradient(180deg, transparent, #ccc, transparent);background-image: linear-gradient(180deg, transparent, #ccc, transparent);background-position: 65%;background-repeat: repeat-y;background-size: 1px 1px;">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
updated answer with pseudo element:
.card-section {
position:relative;
}
.small-4:before {
content:'';
position:absolute;
top:0;
bottom:0;
border-right:solid;
margin-left:-0.75em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
Edit
You can also override fondation CSS to get rid of float at first and then and reset display:
display:flex (do not care if child are floating)
.row {
display:flex;
}
.row :last-child {/* last cells chosen for demo cause shorter in content */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:table + float:none; because float kills display :(
.row {
display:table;
width:100%;
}
.card .card-section .row > article.columns {
display:table-cell;
float:none;/* else display is killed */
}
.row :last-child {/* shortest chosen for demo, you could select first-child or .small-4 */
border-left:solid;
/* Demo purpose : see me */
background:lightgray
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-section">
<section class="row">
<article class="columns small-8">
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
Text Text Text Text
Text Text Text
</article>
<article class="columns small-4">
Text
</article>
</section>
</div>
<div class="card-divider">
<input type="checkbox">
<label>Add to compare</label>
</div>
</div>
display:grid .... well maybe in the futur and then flex will be fully efficient with less CSS to write . BTW, display:table is to include eventually oldish browser that do not accept the flex model
I am working on a site, of which has to have a description section. I am trying to achieve this by having two Bootstrap columns, one sized 8 and then another sized 4 to make sure it is equal to 12. Then in the column which is 8, I want to have two columns inside, to achieve one column of text on the left and then a second column of text on the right.
There is just a problem, as it doesn't seem to be working and whenever I try to do this, it just creates a second column underneath the first one inside of the 8 column.
I have attached an image to make it easier to see what I got and what I am trying to achieve. Any help is much appreciated.
Image of current situation:
What I am trying to achieve:
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
<div class="leftContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
</div>
<div class="rightContDesc">
<div clas="col-md-6">
<p>text text text text text text text text text text text text
<br>text text text text text text text text text text text text
</p>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
Your left and right DIV's wrap the Bootstrap col-md-6 columns so they no longer float next to each other. Also, always put nested col-*s inside another row so the padding is correct..
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="partLineDesc">
<img />
</div>
<div class="row">
<div class="col-md-6">
<div class="leftContDesc">
<img />
</div>
</div>
<div class="col-md-6">
<div class="leftContDesc">
<p>
</p>
</div>
</div>
</div>
<div class="partLineDesc2">
<img/>
</div>
</div>
<div class="col-md-4">
<div class="securInfo">
</div>
</div>
</div>
</div>
Demo: http://codeply.com/go/yRQum3xKKY
It seems your bootstrap columns are all over the place.
You really need to wrap everything you're trying to split into columns into an overhead div that way you're saying that your main container is taking up 12 columns of that grid then you decide which of those 12 the inside columns need to take up.
Quick mock-up below.
---
.partLineDesc{
margin-top: 30px;
text-align: center;
}
.leftContDesc{
margin-top: 20px;
background-color:grey;
}
.rightContDesc{
background-color:grey;
margin-top: 20px;
}
.cottonImg{
margin-top: 15px;
text-align: left;
}
.partLineDesc2{
margin-top: 20px;
text-align: center;
}
.securInfo{
margin-top: 30px;
text-align: center;
background-color:#eff4f9;
border-radius: 10px;
border: 2px solid #dddddd;
padding: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-8">
<div class="partLineDesc">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
<img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
</div>
<div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
<p>
text text text text text texttext text text text text text
<br> text text text text text texttext text text text text text
</p>
</div>
<div class="col-sm-4 col-md-4 col-lg-4">
<div class="securInfo">
</div>
</div>
</div>
<div class="partLineDesc2">
<img src="partDesc.png" alt="line seperation" class="img-responsive" style="width:1000px; height:5px;">
</div>
</div>
Fiddle
I have 2 main sections in each row, each section has an image and some text. How can I split these sections in new line on media query for mobile phones? If I put display-direction: column; on .row-flex then image AND text will also break and I don't want that. I want them to split like it is in image
.row-flex {
display: flex;
}
.col-1 {
flex: 1;
}
.col-2 {
flex: 3;
}
<div class="row-flex">
<a href="#" class="col-1">
<img src="http://placehold.it/90x90">
</a>
<div class="col-2">
<p>text text text text text text text text</p>
</div>
<a href="#" class="col-1">
<img src="http://placehold.it/90x90">
</a>
<div class="col-2">
<p>text text text text text text text text</p>
</div>
</div>
There is no such display-direction: column, what you are looking for is: flex-direction: column, and you need to wrap the elements to make them display:flex in a row
.row-flex {
display: flex;
flex-direction: column;
}
.col-1,
.col-2 {
display: flex
}
.col-1 div {
flex: 1;
}
.col-2 div {
flex: 3;
}
<div class="row-flex">
<div class="col-1">
<a href="#">
<img src="http://placehold.it/90x90">
</a>
<div>
<p>text text text text text text text text</p>
</div>
</div>
<div class="col-2">
<a href="#">
<img src="http://placehold.it/90x90">
</a>
<div>
<p>text text text text text text text text</p>
</div>
</div>
</div>