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>
Related
I am trying to move an image underneath the text. I tried (position: absolute) and moving the image with -px but I want the image to stay in the same place on the HTML but have it moved using only CSS. I am doing a mobile-first approach and because of the desktop design, the IMG has to stay at the same position in HTML. I also tried to moving the text but it just goes over the image or the padding and just doesn't work. It might be easier to explain by screenshots:
The results I want to achieve:
And my current results are:
And my current code is:
img {
display: block;
width: 50%;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
Try this out
<style>
#intromessage{
display: flex;
flex-direction: column-reverse;
}
</style>
A few options are avalaible.
transform:scale(x) can be used
#intromessage,
#intromessage>* {
transform: scale(1, -1); /* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin:auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
for older browser, display:table could be involved :
#intromessage {
display: table;
width: 100%
}
#intromessage>div {
display: table-header-group;/* value to add/remove via mediaquerie */
}
img {
display: block;
width: 50%;
margin: auto;
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
flex is already answered but order can be used too :
#intromessage {
display: flex;
flex-wrap:wrap;/* to be different from other answer */
}
#intromessage>div {
width: 100%;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
and the latest : grid can use order too
#intromessage {
display: grid;
grid-template-rows: auto;
}
img {
display: block;
width: 50%;
margin: auto;
order: 1;/* value to add/remove via mediaquerie */
}
<header id="titleHeader">
<h1><span id="boot">Example</span>Text</h1>
<a class="navbutton" href="#navbar">Menu</a>
</header>
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div>
<h2>Example Text</h2>
<p>
example text, example text, example text<span> example text </span>example text
<span>example text</span>
</p>
</div>
</section>
I would use flexbox for a responsive layout.
#intromessage {
display: flex;
flex-direction: column-reverse;
}
Here is a good resource: CSS Tricks - Guide to Flexbox
I need a responsive CSS grid, containing at most three columns and at least one, to have equal space around each column. This is easily done, with just one row, with flexbox and justify-content: space-evenly as seen here:
Even Spacing Using FlexBox
But I need multiple rows. So how can I get even column spacing with css grid?
Here is what I have currently with a grid. The far left and right margins are half the size of the inner margins
No Even Spacing With Grid
I've thought about using a flexbox for each row in the grid but the idea sounds like it could be more work than it's worth. Thanks
JSFiddle
Equal space between the images vertically and horizontally
The images aren't the direct children of the grid/flex container so some adjustments need to be made to make the images take full width/height of their parents.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
/* at least fill the parent */
min-width: 100%;
/* don't exceed the parent */
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
CSS Grid
Using css grid it should be easy to have 3 items per row and have even space all around.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
min-width: 100%;
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Solution */
[container] {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap:20px; /* even spacing using grid-gap, You can use percentage values if you want*/
padding:20px;
}
[item]{
padding: 10px;
background:red;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
Flexbox
Tricky requires a bit of care
First we need 3 items per row we can just say that like css grid so we calculate, we give each item a third of the overall width of the parent flex-basis:calc(100% / 3);
Second we add the space around using margins say margin:20px, Now the tricky bit is that margins add to width of the item so we need to substract that space from the overall width of the container then calculate the third which will become flex-basis(100% - (20px * 6)) / 3);
6 because each element will have 2 margins left/right 2 x 3=6
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
img {
min-width: 100%;
max-width: 100%;
}
a,[item] {
display: inline-block;
}
/* Solution */
[container] {
width: 100%;
display: flex;
flex-wrap:wrap;
}
[item]{
padding: 10px;
background:red;
flex:0 0 calc((100% - (20px * 6)) / 3);
margin:20px;
}
/* Not needed */
body * {
padding: 10px;
border: 1px solid;
}
<div container>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
<div item>
<a>
<img src="https://via.placeholder.com/305x200">
<p>Some Text</p>
</a>
</div>
</div>
I have a row with six columns of image and text here: https://i.imgur.com/UKGGCrX.png
I want to align the two-line text (e.g. Resources and Reserves) with "Exploration" and "Geological Data". https://i.imgur.com/Tplzivb.png
Adding a margin below the image doesn't do the trick, nor does adding a margin above the text... also tried setting a min-height for the icon, but that doesn't do it either.
How can I accomplish this?
Using flexbox you can easily align your text on "top".
This is default flexbox behaviour and does align your text on "baseline":
.container{
display: flex;
flex-flow: row nowarp;
}
.text{
max-width: 30px;
}
<html>
<div class="container">
<div class="imgt">
<img src="https://dummyimage.com/20x20">
<div>Some Text</div>
</div>
<div class="imgt">
<img src="https://dummyimage.com/20x20">
<div class="text">Some Long long Text</div>
</div>
</div>
</html>
I assume you have a margin-top: auto; and margin-bottom: auto;, or some flexbox properties like align-items: center; somewhere, that your text gets centered inside the div.
You can use flex styles to obtain your desired results. I created an example showing how the align-items: stretch; property will help with keeping icons/images/and content aligned with siblings.
Live example: https://codepen.io/SROwl/pen/xNrRmw
HTML:
<h3> align content top </h3>
<div class="bucket-row">
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Triplen Extra Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
</div>
<h3> align content bottom </h3>
<div class="bucket-row content-end">
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Single Line</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Triplen Extra Line Title</span>
</div>
<div class="bucket">
<img src="https://dummyimage.com/85x85">
<span>Double Line Title</span>
</div>
</div>
SCSS:
body {
font-family: sans-serif;
}
.bucket-row {
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
width: 600px;
margin-bottom: 40px;
.bucket {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 85px;
background-color: #eee;
padding-bottom: 20px;
img {
margin-bottom: 15px;
}
}
&.content-end {
.bucket {
span {
margin-top: auto;
}
}
}
}
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;
}
I am working in a bootstrap project where i need some text to be centered vertically with another row. Obviously the two rows are not the same size hence the content size. Is there a way to solve this without escalating to flexbox or is this the way to go? Also i would like to maintain the responsiveness.
Fiddle: http://codepen.io/anon/pen/mPwxXa
HTML
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-xs-12">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
</div>
<div class="col-lg-6 col-xs-12">
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
</div>
</div>
</div>
You can do this with Flexbox and media queries.
As for flexbox you can just use display: flex and align-items: center on parent element and that will be row in this case.
Now you just need to adjust min-width in media queries to be same as bootstrap breakpoints So for example if you are using col-sm-6 bootstrap class, then 768px is break point and you will use #media(min-width: 768px) { } in your media queries.
For col-sm- you can use #media(min-width: 768px) Fiddle
For col-md- you can use #media(min-width: 992px) Fiddle
For col-lg- you can use #media(min-width: 1200px) Fiddle
#media(min-width: 768px) {
.flex {
display: flex;
align-items: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row flex">
<div class="col-sm-6">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
</div>
<div class="col-sm-6 text-center">
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
</div>
</div>
</div>
Instead of Flexbox you can also get vertical-align with CSS Tables and again you have to adjust your queries with bootstrap breakpoints same as for flexbox. With tables you have to remove float from columns with float: none to get vertical-align.
#media(min-width: 768px) {
.row.display_table {
display: table;
}
.col-sm-6.left_cell, .col-sm-6.right_cell {
display: table-cell;
vertical-align: middle;
float: none;
}
img {
width: 100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row display_table">
<div class="col-sm-6 left_cell">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive" />
</div>
<div class="col-sm-6 right_cell text-center">
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
</div>
</div>
</div>
I don't want to be too simple, but you are wondering if flexbox is the way to go. Actually, at this time, it is.
The reason behind the text container is that you don't need to use text-align:center; to center your text if you don't want to, but it is still horizontal centered.
body {
padding: 2em;
}
#media (min-width: 1200px) {
.vcenter {
display: flex;
align-items: center;
}
.text {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row vcenter">
<div class="col-lg-6 col-xs-12 ">
<img src="http://rack.2.mshcdn.com/media/ZgkyMDE1LzA5LzEzLzNjL2dvb2dsZXRodW1iLmIyNGE0LmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/63126c72/af4/google-thumb.jpg" class="img-responsive"/>
</div>
<div class="col-lg-6 col-xs-12">
<div class="text">
<p>This is some text some te xt some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
<p>This is some text some text some more text</p>
</div>
</div>
</div>
</div>
You could create a div with relative position like:
<div style='position: relative; top: 50%; transform: translateY(50%); height:100%;'>
To encapsulate all the <p> tags and align middle. There are a lot of methods like (http://vanseodesign.com/css/vertical-centering/):
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
but with inline elements didn't work quite well. Note I change the col-lg-6 to col-sm-6, because in codepen you could see the 2 columns.
Extracted from here: https://davidwalsh.name/css-vertical-center
Here a working codepen: http://codepen.io/jpaulet/pen/bpRvyd?editors=1100
Hope it helps!