This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am doing a group project where we are trying to replicate this website and I have been assigned this section:
I have everything laid out with flexbox but for some reason can't get the text centered for the section on the right. This is what I have got so far:
I tried using justify-content: center and align-items: center but nothing happens to the text. How do I align everything in the center?
Here is all my code in a codepen: https://codepen.io/caseycling/pen/VwmExMY
Here is my HTML:
'<body>
<div class="container">
<div class="ten-img">
<h1>10</h1>
</div>
<div class="yrs-exp">
<h2>Years Of Experience</h2>
<p>
DreamSoft is a team of highly experienced app designers and developers
creating unique software for you.
</p>
<button>Get In Touch</button>
</div>
<div class="deats-cont">
<div class="deat" id="deat-1">
<h1>2K</h1>
<p>Apps developed</p>
</div>
<div class="deat" id="deat-2">
<h1>40</h1>
<p>Consultants</p>
</div>
<div class="deat" id="deat-3">
<h1>12</h1>
<p>Awards</p>
</div>
<div class="deat" id="deat-4">
<h1>160</h1>
<p>Employees</p>
</div>
</div>
</div>
<div class="clients">
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-9-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-10-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-3-270x117.png"
alt="mittos"
/></a>
<a
><img
src="https://ld-wt73.template-help.com/wt_prod-18959/images/clients-11-270x117.png"
alt="mittos"
/></a>
</div>
And here is the CSS:
* {
margin: 0;
}
.container {
margin: 5rem 10rem 2rem;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.ten-img {
font-size: 140px;
}
.yrs-exp {
margin: 1rem;
font-size: large;
flex-basis: 20%;
text-align: start;
}
.yrs-exp p {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.deats-cont {
display: flex;
flex-wrap: wrap;
}
.deat {
flex-basis: 49%;
min-height: 100px;
}
#deat-1 {
border-right: solid 1px black;
}
#deat-2 {
border-bottom: solid 1px black;
}
#deat-3 {
border-top: solid 1px black;
}
#deat-4 {
border-left: solid 1px black;
}
.clients {
margin: 1rem 10rem;
display: flex;
justify-content: space-between;
}
.clients img {
border: solid 1px black;
}
enter code here
Aligned text center in the box. Modified CSS only to get text in center
#media(min-width: 768px) {
.container-1 {
display: flex;
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* flex-direction: column */
}
.container-2 {
display: flex;
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
justify-content: space-between;
/* justify-content: space-around; */
/* justify-content: flex-center; */
}
}
.container-3 {
display: flex;
flex-wrap: wrap;
}
.container-1 div, .container-2 div, .container-3 div{
border: 1px #ccc solid;
padding: 10px;
text-align: center;
}
.box-1 {
flex: 2;
order: 1;
}
.box-2 {
flex: 1;
order: 3;
}
.box-3 {
flex: 1;
order 2;
}
.container-2-box {
/* width: 27%; */
flex-bassi: 27%
}
.container-3-box {
/* width: 27%; */
flex-basis: 15%
}
<div class='container-1'>
<div class='box-1'>
<h3> Box One </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='box-2'>
<h3> Box Two </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='box-3'>
<h3> Box Three </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
<div class='container-2'>
<div class='container-2-box'>
<h3> Box Four </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-2-box'>
<h3> Box Five </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-2-box'>
<h3> Box Six </h3>
<p> Lorem ipum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
<div class='container-3'>
<div class='container-3-box'>
<h3> Box Seven </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-3-box'>
<h3> Box Eight </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
<div class='container-3-box'>
<h3> Box Nine </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Ten </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Eleven </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div><div class='container-3-box'>
<h3> Box Tweleve </h3>
<p> Lorem ipsum dolor sit amet, consectuture adispisi elit. </p>
</div>
</div>
Related
The problem is that when I use display inline-block it doesn't move all the boxes at once on a mobile screen (It has 3 boxes called "single-facilities"). The thing is that they move one at a time. I'm using display inline-block on media screen.
HTML:
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm
od tempor.</p>
</div><!--facilities-text-->
</div><!--single-facilities-->
</div><!--box-facilities-->
CSS:
.box-facilities{
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities{
display: inline-block;
}
.img-facilities{
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities{
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px){
.box-facilities{
display: inline-block;
}
}
You can just change the direction to column as
flex-direction: column;
.box-facilities {
display: flex;
height: 800px;
align-items: center;
justify-content: space-evenly;
}
.single-facilities {
display: inline-block;
}
.img-facilities {
background-color: gray;
width: 27rem;
height: 27rem;
border-radius: 1.5rem;
}
.text-facilities {
margin-top: 1rem;
max-width: 28rem;
}
#media screen and (max-width: 1370px) {
.box-facilities {
/* display: inline-block; */
flex-direction: column;
}
}
<div class="box-facilities">
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>World Class Library</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Largest Play Ground</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
<div class="single-facilities">
<div class="img-facilities"></div>
<div class="text-facilities">
<h1>Tasty and Healthy Food</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusm od tempor.</p>
</div>
<!--facilities-text-->
</div>
<!--single-facilities-->
</div>
<!--box-facilities-->
Here's what I have so far:
.card {
padding: 1rem;
height: auto;
}
.cards {
max-width: 640px;
margin: 0 auto;
display: grid;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
#media (min-width: 768px) {
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
On desktop view it is fine but on smaller views like mobile, I'd like to stack the title and description close together, so the gap between title and description close together but the gap of each row stays the same. Like so:
What's the best way to achieve this? Is grid the right way to approach this?
You can do like this:
Only use display: grid; on desktop, and then use a margin-bottom for controlling the space. 😊
.cards {
max-width: 640px;
margin: 0 auto;
grid-gap: 32px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cardTitle {
color: red;
font-size: 32px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
}
.cardDescription {
font-size: 18px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-bottom: 2rem;
}
#media (min-width: 768px) {
.cards {
display: grid;
}
.cardTitle {
text-align: right;
}
.cardDescription {
text-align: left;
}
}
<div class="cards">
<div class="card cardTitle">Title one</div>
<div class="card cardDescription">Description one Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title two</div>
<div class="card cardDescription">Description two Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title three</div>
<div class="card cardDescription">Description three Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title four</div>
<div class="card cardDescription">Description four Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="card cardTitle">Title five </div>
<div class="card cardDescription">Description five Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
</div>
How to make lines around the circle which holds text for each line. I don't want text to be in the pseudo class. Below is the required output Image
.
Below code is which I have tried from Paulie_D previous solutions
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
position: relative;
border-radius: 50%;
margin: 100px auto;
}
.marker {
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
transform: translate(-50%, -50%);
}
.vert {
width: 2px;
height: 50px;
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
transform: translate(-50%, -50%);
}
.angle-1 {
transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div>
Unfortunately your question is not entirely clear, but my guess is that you want to create some info-graphic about seeds with text around a nice graphic.
Instead of focusing on showing you how to create bordered circles with CSS and place text around them, I removed the text from your original image and cropped it. Because, as I suggested in my comment to visit my answer on SO62815794, it made more sense to me to take that code and the cropped image and show you how to create a responsive info-graphic with Flexbox Layout and a media query.
If this is not what you meant, please modify your answer and be more specific about what you need. However, while it is fun to create a graphic with CSS, in terms of maintenance you would be much better off with a cropped image or SVG file (more graphical elements for creating custom shapes).
The Snippet
has two demos showing how to use Flexbox Layout combined with Custom Attributes to create responsively sizing 2D XxY grids with the cropped image in the center.
demo 1 is a fairly straightforward 3x3 flexbox grid with equally sized cells
demo 2 is more complicated and has a main 3x1 grid with nested 1x2, 1x3 and 1x2 child grids giving it a more 'circular feel' than demo 1
The snippet is heavily commented and should be self explanatory, but additionally:
I left your original .outCircle in the HTML, just disabled it.
the cropped image is 138x138px PNG file (11.4Kb), with a transparent background (alpha channel) so you can play with the info-graphic background-color (: White for now)
The #media considers anything smaller than 720px (W/H) to be a 'smartphone' and will neither show the image (or .outCircle) nor any grid layout.
All you need to do is some fine-tuning with spacing, colors and font-sizes.
Make sure to go 'Full page' on SO and resize the browser window.
/*************************************/
/* main page structure, MOBILE first */
/*************************************/
body { height: 100vh; background-color: White }
.main-structure {
display: flex; flex-flow: column wrap;
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center
/* add your specific mobile settings */
}
.main-structure .outCircle { display: none } /* don't show on mobile */
.main-structure img { display: none } /* ditto */
.main-structure ul { padding-right: 40px } /* [OPTIONAL] to make L/R padding equal */
/*************/
/* EYE-CANDY */
/*************/
[band*="header"] {
background-color: rgba(254,190,0,1); /* egg yolk-ish */
text-align: center
}
.main-structure .headline {
width: 100%; /* stretch to fill parent */
padding: .25em 1em; /* some inner spacing */
color: CornflowerBlue;
font-size: 1.25em; font-weight: bold;
}
.outCircle {
position: relative; /* creates a new 'stacking context' for child elements */
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center;
}
.inner {
position: absolute;
width : 1.25rem;
height: 1.25rem;
border-radius: 50%;
background-color: lightblue;
}
.marker {
position: absolute; /* direct positioning inside parent 'stacking context' */
width: 3rem; height: 0.125rem;
/* center element in parent */
top: 50%; left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
}
.vert {
width: 0.125rem; height: 3rem;
transform: translate(-50%, -50%);
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
}
.angle-1 { transform: translate(-50%, -50%) rotate(45deg) }
.angle-2 { transform: translate(-50%, -50%) rotate(-45deg) }
/*****************************/
/* DESKTOP specific settings */
/*****************************/
#media (min-width: 720px) and (min-height: 720px) { /* anything larger than average mobile */
/* base flexbox patch grid structure */
[patch],[patch]>* { display: flex; flex-wrap: wrap } /* patch and cell containers */
[patch] { align-content: flex-start; position: relative }
[patch]>* { flex-grow: 1; /* [MANDATORY] */
overflow: hidden; /* [OPTIONAL] */
/* Center everything inside the element (vertical and horizontal) */
justify-content: center; align-content: center; align-items: center }
/* the "nine-patch", inspired by Android 9-patch image; essentially a 3x3 matrix */
[patch^= "3x"]>* { height : 33.33333%; max-height: 33.33333% } /* ^...starts with */
[patch*= "x3"]>* { flex-basis: 33.33333%; max-width : 33.33333% } /* *...contains */
[patch^= "1x"]>* { height: 100%; max-height: 100% } [patch*= "x1"]>* { flex-basis: 100%; max-width: 100% }
[patch^= "2x"]>* { height: 50%; max-height: 50% } [patch*= "x2"]>* { flex-basis: 50%; max-width: 50% }
/* add your own specific patch cell sizes like below */
/*
7x1 days in a week, 18x8 Periodic Table, 24x1 hours in a day, 22x6 keyboard+numpad, etc.
just divide 100% by the required XxY values
Usage:
<parent-tag patch="XxY">
requires X * Y number of child-tags to work properly
<child-tag 1>
....
<child-tag N>
</parent-tag>
*/
body { background-color: rgba(0,0,0,.1) } /* light grey */
.main-structure {
flex-flow: row wrap; /* we have 3 rows of several columns */
height: 75vmin; width: 75vmin; /* Modify to your needs */
background-color: White;
}
[band*="info2"] .main-structure>[patch="1x2"] {
max-width: 75%;
/* instead of 100%, this will move the cells closer for a 'circular feel' */
}
.main-structure img { display: block; width: 80% } /* Modify to your needs */
.main-structure .outCircle {
/* flex for easy centering of '.inner' */
display: flex; /* make visible */
}
}
/**************************/
/* preferred global rules */
/**************************/
html,body { width: 100%; max-width: 100% }
html { -webkit-box-sizing: border-box; box-sizing: border-box }
*, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit }
body { margin: 0 } /* remove default <body> spacing */
/*
Above CSS defines ALL elements to use 'border-box' (most common practice nowadays)
make sure to own the boxmodel knowledge!
MDN 'The box model': https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
w3schools 'CSS box-sizing Property': https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
*/
/*
All math reference: https://www.mathsisfun.com/equation_of_line.html
*/
/* responsive base font size using y = mx + b */
html { font-size: calc(0.625vmin + 0.625rem) } /* (320,12)(1280,18) */
/* Simple banding attribute for use in 'Landing Page' layout */
[band] { display: flex; flex-flow: column wrap; align-content: center }
body[padded="1"],
body[padded="0"] [band*="padded"] {
/*
responsive page padding
and responsive band padding (same as responsive page padding, but at band level)
Top/Bottom padding: p1(320,16) p2(1920, 72) => 0.035x + 4.8 => vary from 16 to 72px
Left/Right padding: p3(320, 8) p4(1920,320) => 0.195x - 54.4 => vary from 8 to 320px
'Band padding' is only active when 'page padding' is off (0)
*/
padding: calc(3.5vh + 4.8px) calc(19.5vw - 54.4px);
}
/* for debugging (put in <body>) */
[outlines="1"] * { outline: 1px dotted }
<body outlines="0" padded="0">
<div band="padded.header">
<h1>3x3 easy grid with two dummies</h1>
<h3>easy, but straight columns</h3>
</div>
<div band="padded.info1">
<div class="main-structure" patch="3x3">
<div>
<div class="headline">Meet the farmer</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline dummy"></div>
</div>
<div>
<div class="headline">Provenance</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">Certification</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<img src="https://i.postimg.cc/zvBCdxp4/circles.png">
</div>
<!--div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div -->
<div>
<div class="headline">Life of the seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">History of seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline dummy"></div>
</div>
<div>
<div class="headline">IoT data this seed season</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
</div>
<div band="padded.header">
<h1>3x1 nested grid with 1x2, 1x3 and 1x2 child grids</h1>
<h3>more complicated, but has rows with a 'circular feel'</h3>
</div>
<div band="padded.info2">
<div class="main-structure" patch="3x1">
<div patch="1x2">
<div>
<div class="headline">Meet the farmer</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">Provenance</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
<div patch="1x3">
<div>
<div class="headline">Certification</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<img src="https://i.postimg.cc/zvBCdxp4/circles.png">
</div>
<!--div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div -->
<div>
<div class="headline">Life of the seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
<div patch="1x2">
<div>
<div class="headline">History of seed</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
<div>
<div class="headline">IoT data this seed season</div>
<ul>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
<li>Lorem ipsum dolor sit amet, exerci dolorem est ad.</li>
</ul>
</div>
</div>
</div>
</div>
</body>
You could wrap it in a div and give the <div> the following styling:
#circle {
border: solid black 2px;
border-radius: 50%;
width: 10em; //Depends on the circles size..
height: 10em;
}
I am new here.
I am banging my heads on the keyboard as I spent the last 2 hours trying to solve this problem:
ASSETS: I have a page where I list services using an image on the left, and text on the right. Except... the following service has text on the left and image on the right, so the page looks a little bit like a chequer board. IMAGE-TEXT / TEXT-IMAGE / IMAGE-TEXT.. you get the idea. I used tables to do that. one table and one row per service, two columns for each row.
This is great on desktop; the problem is that when on mobile, my trusty responsive tables act this way: they always put the left column on top of the right column, ignoring the content. The result is that I have IMAGE then TEXT than TEXT then IMAGE etc.., which is confusing when scrolling down on mobiles. We don't know what image relates to what because you would expect a different behaviour: you would want to see IMAGE, then TEXT, then IMAGE, then TEXT etc...
I haven't found any solution to this on the web, possibly because I can't synthesise properly my question in Google! So I thought I asked you. Please any comment and approach to this kind of problem is welcome!
Here's my CSS and HTML:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before{
display:block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
My approach to this is to use display: flex.
Display your DIVs in flex mode and add a class to the second paragraph to force it to the top, like this:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before {
display:flex;
-webkit-display:flex;
-moz-display:flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
.col-floated {
order: -1;
-webkit-order: -1;
-moz-order: -1;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services col-floated">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
I've attached an illustration to help me get my point across!
So, DIV 1 and DIV 2 (children of PARENT DIV) are columns on a page I'm building, and the content within them is not of the same height, so currently their buttons do not line up vertically.
I need to vertically align BUTTON 1 and BUTTON 2 (I guess to the bottom of PARENT DIV?);
How do I go about this please?
Thanks!
I don't think you can get away from the position CSS directive, but if you don't want to use bottom, there are numerous jQuery examples that will allow you to logically place your divs.
Alternately (and I know you seem to want to use Divs) but you may be able to use a table easier.
You can apply position relative and a bottom padding in DIV 1 and DIV 2 to prevent its content to overlap the buttons, whose position should be absolute (maybe bottom: 10px according to your screenshot).
Example: jsfiddle.net/yy87qdmt/1/
Tested & proofed in firefox-45 and chrome-50
<body>
<main>
<style scoped>
main
{
flex-direction: row;
display: flex;
}
main > figure
{
border: 1px darkgrey solid;
justify-content: flex-end;
flex-direction: column;
box-sizing: border-box;
display: flex;
}
main > figure > :first-child
{
background-color: lightgrey;
flex-grow: 1;
}
main > figure > figcaption
{
background-color: black;
color: lightgrey;
flex-shrink: 1;
}
</style>
<figure>
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<figcaption>
Caption 0
</figcaption>
</figure>
<figure>
<article>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur</p>
</article>
<figcaption>
Caption 1
</figcaption>
</figure>
</main>
</body>
Flexbox can do that.
.row {
display: flex;
width: 80%;
margin: auto;
}
.col {
width: 50%;
border: 1px solid grey;
text-align: center;
padding: 1em;
}
img {
width: auto;
max-height: 100%;
}
p {
text-align: justify;
}
/* the magic */
.col {
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
}
<div class="row">
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
<button>My button</button>
</div>
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
<button>My button</button>
</div>
</div>