I am trying to build a resposive form with CSS flexbox.
I want the title of each input and the input itself to be on the same line.
I am trying to align the form so the inputs will be on the same vertical line, and the titles will align always to the right (See the code below)
In-order to do this, I put the titles and inputs and separate containers.
My problem is that because the the inputs are higher than the titles, after a few rows the form is no longer straight.
Do you know how it can be fixed? See the code below.
Thx! (:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
border: 5px solid lightcoral;
display: flex;
}
.child
{
display: flex;
text-align: center;
flex-direction:column;
max-width:300px;
}
.item{
display: flex;
margin:5px;
text-align: center;
margin-left: auto;
}
.item-input{
margin:5px;
display: flex;
text-align: center;
box-sizing: border-box;
}
#media screen and (max-width: 1200px) {
.parent {
justify-content:left;
}
}
#media screen and (min-width: 1200px) {
.parent {
justify-content:center;
}
}
</style>
<div class="parent">
<div class="child">
<div class="item">Name</div>
<div class="item">Age</div>
<div class="item">Country</div>
<div class="item">Email</div>
</div>
<div class="child">
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
<div class="item-input"><input type=text></div>
</div>
</div>
</div>
</htmL>
There you go :)
the span element has no effect, its just a way to give a text a class you want :p
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<style>
.parent
{
border: 5px solid lightcoral;
text-align:center;
display: flex;
justify-content:center;
}
.child
{
display: flex;
text-align: center;
flex-direction:column;
max-width:300px;
align-content: right;
}
.item{
display: flex;
margin:5px;
text-align: center;
margin-left: auto;
}
.item-input{
margin:5px;
display: flex;
text-align: center;
box-sizing: border-box;
}
#media screen and (max-width: 1200px) {
.parent {
justify-content:left;
}
}
</style>
<div class="parent">
<div class="child">
<div class="item-input"><span class="item">Name </span><input type=text></div>
<div class="item-input"><span class="item">Age </span><input type=text></div>
<div class="item-input"><span class="item">Country </span><input type=text></div>
<div class="item-input"><span class="item">Email </span><input type=text></div>
</div>
</div>
</htmL>
I'm not sure what you mean by "aligning to the right".
But if you want to have the textboxes in the left column and the "labels" on the right, without changing the html, you can use order.
.parent {
border: 5px solid lightcoral;
text-align: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
text-align: center;
flex-direction: column;
max-width: 300px;
align-content: right;
}
.parent .child:first-child {
order: 1; /*added*/
}
.item {
display: flex;
margin: 5px;
text-align: center;
/*margin-left: auto;*/
}
.item-input {
margin: 5px;
display: flex;
text-align: center;
box-sizing: border-box;
}
#media screen and (max-width: 1200px) {
.parent {
justify-content: flex-start; /*"left" is not recognized by Chrome*/
}
}
<div class="parent">
<div class="child">
<div class="item">Name</div>
<div class="item">Age</div>
<div class="item">Country</div>
<div class="item">Email</div>
</div>
<div class="child">
<div class="item-input">
<input type=text>
</div>
<div class="item-input">
<input type=text>
</div>
<div class="item-input">
<input type=text>
</div>
<div class="item-input">
<input type=text>
</div>
</div>
</div>
Related
I'm learning responsive web-development using media queries and I want to know if it's possible to move an element from one div to another without using a script.
On a desktop display it's arranged like
---------
div1 | | div2
div3 | image | div4
div5 | | div6
---------
which is what I was going for.
and on mobile screens I want
---------
| |
| image |
| |
---------
div1
div2
div3
div4
div5
div6
But I can't seem to move divs past their parent divs.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shuffle</title>
</head>
<body>
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="leftBox">
<div class="boxItem" id="first">
<p>1</p>
</div>
<div class="boxItem" id="third">
<p>3</p>
</div>
<div class="boxItem" id="fifth">
<p>5</p>
</div>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="rightBox">
<div class="boxItem" id="second">
<p>2<p>
</div>
<div class="boxItem" id="fourth">
<p>4</p>
</div>
<div class="boxItem" id="sixth">
<p>6</p>
</div>
</div>
</div>
</body>
</html>
CSS
/*
_______________________________________
MOBILE SCREEN
_______________________________________
*/
* {
box-sizing: border-box;
font-family: "Comic Sans MS", Times, serif;
}
#main {
display: -webkit-flex;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
html {
text-align: center;
}
img{
display: inline-block;
max-width: 100%;
height: auto;
}
.image {
display: inline-block;
width: auto;
max-width: 50%;
border: 1px solid gold;
align-self:center;
order: -1;
}
.header {
text-align: center;
}
.boxItem{
border: 1px solid blue;
padding: 2px;
margin: 5px;
}
.leftBox{
display: flex;
flex-direction: column;
width: 50%;
}
.rightBox{
display: flex;
flex-direction: column;
width: 50%;
}
#first{
order: 1;
}
#second{
order: 2;
}
#third{
order: 3;
}
#fourth{
order: 4;
}
#fifth{
order: 5;
}
#sixth{
order: 6;
}
/*
_______________________________________
DESKTOP SCREEN
_______________________________________
*/
#media only screen and (min-width: 768px) {
#first{
order: 1;
}
#second{
order: 2;
}
#third{
order: 3;
}
#fourth{
order: 4;
}
#fifth{
order: 5;
}
#sixth{
order: 6;
}
img{
align-self: center;
}
.image{
align-self: center;
justify-content: center;
align-items: center;
order: 0;
}
#main{
flex-direction: row;
justify-content: space-between;
}
.leftBox{
display:flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
align-self: stretch;
}
.rightBox{
display:flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
align-self: stretch;
}
}
If it's not possible to do this with css as it's written here, then is there another way to achieve this style using one flexbox?
I also have this on codepen https://codepen.io/johntarvis/pen/LYRYVmd?editors=1100 if that helps.
You can do it like this. by using columns property and set it to 2. It's really difficult to achieve your approach without jquery. but in the image part you can set it to absolute and make it center part.
Here's a sample code.
.wrapper {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0;
}
#main {
position: relative;
}
.column {
-webkit-columns: 2;
columns: 2;
text-align: center;
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
}
.sub_col {
display: block;
width: 34%;
min-height: 100px;
border: 1px solid red;
margin: 0 0 1rem;
position: relative;
z-index: 15;
}
.image {
width: 30%;
margin: 0 auto;
padding: 0;
left: 0;
right: 0;
top: 50%;
position: absolute;
transform: translateY(-50%);
}
.image img {
max-width: 100%;
}
#media only screen and (max-width:768px) {
.column {
-webkit-columns: 1;
columns: 1;
}
.sub_col {
width: 100%;
}
.image {
top: 0;
transform: none;
margin-bottom: 1rem;
position: relative;
width: 100%;
}
}
<div class="wrapper">
<div id="main">
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="column">
<div class="sub_col">1</div>
<div class="sub_col">2</div>
<div class="sub_col">3</div>
<div class="sub_col">4</div>
</div>
</div>
</div>
In this way your div elements are still in tact by numbering 1,2,3,4 and so on.
You can use #media queries and flexbox to achieve the desired result:
#main {
display: flex;
width: 100%;
flex-direction: row;
height: 300px;
}
#main > div { width: 33%;}
.leftBox, .rightBox {
height: 100%; text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
img {max-width: 100%; height: auto;}
#media screen and (max-width: 768px) {
#main {
flex-direction: column;
height: auto;
}
#main > div { width: 100%;}
.image {order: -1;}
}
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="leftBox">
<div class="boxItem" id="first">
<p>1</p>
</div>
<div class="boxItem" id="third">
<p>3</p>
</div>
<div class="boxItem" id="fifth">
<p>5</p>
</div>
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="rightBox">
<div class="boxItem" id="second">
<p>2<p>
</div>
<div class="boxItem" id="fourth">
<p>4</p>
</div>
<div class="boxItem" id="sixth">
<p>6</p>
</div>
</div>
</div>
Read more about ordering elements using flex on MDN
This SO related: how can I reorder HTML using media queries?
CSS Grid might be the way to go.
You can maintain a more logical HTML ordering of 1 - 6 and use CSS to organize the display. This also avoids messing around with absolute positioning. The one downside is if you have a dynamic number of rows and want to span the image across all of them, in which case see this answer: https://stackoverflow.com/a/42240114/4665
You will only need to give minimal styling for mobile then replace the code in your desktop media query with the below. Then tweak the style as needed.
#main {
/*Set Grid*/
display: grid;
/*We want 3 equal columns*/
grid-template-columns: 1fr 1fr 1fr;
/*And 3 equal rows -- Can be omitted*/
grid-template-rows: 1fr 1fr 1fr;
/*With a named area for the picture in the middle cell*/
/*grid-template-areas: ". Pic ." ". Pic ." ". Pic .";*/
}
#main>.image {
/*Place the image in column 2*/
grid-column-start: 2;
/*Place the image in the first row, span 3 rows*/
grid-row: 1 / span 3;
/*If Using named area, assign to the named area*/
/*grid-area: Pic; */
}
/*Just for demo purposes, don't move this into your media query!*/
.image>img {
width: 200px;
}
.boxItem {
text-align: center;
}
<div class="header">
<h1>Shuffle</h1>
</div>
<div id="main">
<div class="image">
<img src="https://images.unsplash.com/photo-1605842581240-a0e2527d200b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
</div>
<div class="boxItem"><p>1</p></div>
<div class="boxItem"><p>2</p></div>
<div class="boxItem"><p>3</p></div>
<div class="boxItem"><p>4</p></div>
<div class="boxItem"><p>5</p></div>
<div class="boxItem"><p>6</p></div>
</div>
With using flexbox I am trying to create the right lay-out on screens with min-width of 1024 (using #media query). The assignment says we should do it with the flex (shorthand) property but I can't seem to figure out how. The flex-items should however grow by expanding the viewport.
Next to that when I set the flex-flow to row-wrap in the media query it only shows two flex-items per row instead of all three. I tried setting a width on the container element but that didn't help. For the assignment I am not allowed to use Grid or Table. And the since the letters define a acronym they should be in two seperate div's.
Hopefully I have been able to give an accurate description of the desired result (see pictures below for the desired result) Any help would be much appreciated!
Code: Codepen
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div>
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- 2nd acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
}
.textblock-wrapper {
display: flex;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
You could change the flex-direction of .textblock-container to 'column' in #media query. I adjusted the inline-size of .textblock-square as well. See below:
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
}
.textblock-wrapper {
display: flex;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-container{
flex-direction: column;
}
.textblock-square {
flex: auto;
inline-size: 10vw;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div>
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- 2nd acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
</body>
</html>
I made you such a layout... What has changed - a heading appeared above the blocks. The blocks themselves are adaptive to you, since a flex wrap was added, and all blocks are in the same parent container, which will allow for better mobile adaptation. The content of the blue blocks has been adjusted. Adjusted to fit the image. You can set the necessary indents between the blocks at your discretion.
#import url('https://fonts.googleapis.com/css2?family=Inconsolata&family=Oswald&family=Roboto&display=swap');
/* General styles */
html {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0 1.5rem;
}
#media only screen and (min-width:1440px) {
body {
inline-size: 1200px;
margin: 0 auto;
}
}/* Gallery */
.image-container {
display: flex;
flex-flow: column wrap;
align-content: center;
padding-block-end: 10px;
}
.images {
display: flex;
flex-wrap: wrap;
}
img {
inline-size: 100%;
}
img:nth-child(n+2):nth-child(-n+3) {
opacity: 0.5;
}
#media only screen and (min-width:768px) {
img {
inline-size: 49.7%;
}
}
#media only screen and (min-width:1024px) {
img {
inline-size: 24.69%;
}
}
/* Horizontal line */
hr {
border-image: linear-gradient(to right, black, white, black) 1;
}
/*Textblocks*/
.textblock-container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.textblock-wrapper {
display: flex;
flex-wrap: wrap;
}
.textblock-square {
display: flex;
justify-content: center;
align-items: center;
flex: auto;
block-size: 30vw;
inline-size: 30vw;
border:1px solid black;
padding:10px;
border-radius: 15%;
background-color: blue;
margin-block-end: 5px;
}
.textblock-circle{
block-size: 30vw;
inline-size: 30vw;
border-radius: 75%;
background-color: lightgrey;
text-align: center;
line-height: 30vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="nederlandversteend.css" type="text/css">
<title>Nederland versteend</title>
</head>
<body>
<!-- Image Gallery -->
<section>
<h2 id="natuurfoto's">Foot's van onze natuur</h2>
<div class="images">
<img src="https://images.unsplash.com/photo-1560217324-b389178b26bd?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Zonsondergang met vogels in de lucht">
<img src="https://images.unsplash.com/photo-1555450222-03ea2be21212?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Dal met rivier">
<img src="https://images.unsplash.com/photo-1550779351-a69c377c8893?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Een veld met bloemen">
<img src="https://images.unsplash.com/photo-1517382848528-40b248d69782?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Laan in het bos">
</div>
</section>
<!-- Horizontal line -->
<hr>
<!--Textblocks-->
<section class="textblock-container">
<h2 id="blocks">This is wrap blocks</h2>
<!-- First acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</section>
Thanks for jumping in. Your answers were helpful. I have managed to create the result I wanted by altering the CSS as below.
For full page see Codepen
/*Textblocks*/
.textblock-container {
display: flex;
flex: 1 0 50%;
}
.textblock-wrapper {
display: flex;
flex: 1 0 50%;
flex-flow: column wrap;
}
.textblock-square {
display: flex;
border: 2px solid #000;
padding:10px;
border-radius: 15%;
background-color: #0000ff;
margin-inline-end: 2px;
margin-block-end: 2px;
}
.textblock-circle{
flex: 75%;
border-radius: 75%;
background-color: #D3D3D3;
border: 1px solid #000;
text-align: center;
line-height: 28vw;
font-family: 'Oswald', sans-serif;
font-size: 8vw;
}
#media only screen and (min-width: 1024px) {
.textblock-container{
flex-direction: column;
}
.textblock-wrapper {
display: flex;
flex-flow: row wrap;
}
.textblock-square {
flex: auto;
}
}
HTML
<!--Textblocks-->
<section>
<h2>Letterblokjes</h2>
<!-- First acronym -->
<div class="textblock-container">
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
<!-- Second acronym -->
<div class="textblock-wrapper">
<div class="textblock-square">
<div class="textblock-circle">
L
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
O
</div>
</div>
<div class="textblock-square">
<div class="textblock-circle">
I
</div>
</div>
</div>
</div>
</section>
Hi I am trying to build this layout with flexbox.I provided my current code because i dont know how to move further.Even i posted image how iut should look like under the code.I tried everything but i cant achieve these result. Columns 2,3,5,6,7,8 must be same size. Im new to flex box and i really want to achieve this goal. Thanks for any help.
.tall {
height: 300px;
}
.content {
display: flex;
height: 100%;
}
.left {
display: flex;
flex-direction: column;
flex: 1;
}
.box {
padding-bottom: 50px;
}
.right3collumns {
display: flex;
flex-direction: column;
flex: 2;
}
.box2:nth-child(1) {
background-color: teal;
}
.box2:nth-child(2) {
background-color: red;
}
.box2:nth-child(3) {
background-color: blue;
}
.right {
flex: 2;
background: #22B14C;
}
.right2 {
display: flex;
flex-basis: 200px;
flex-direction: column;
background-color: red;
}
.right2small {
flex-basis: 100px;
background-color: turquoise;
}
.box:nth-child(1) {
background: #ED1C24;
}
.box:nth-child(2) {
background: #00A2E8;
}
.box:nth-child(3) {
background: #FFAEC9;
}
<div class="content">
<div class="right">
<img src="assets/group.png" alt="group">
</div>
<div class="left">
<div class="box">Small DIv</div>
<div class="box">Small DIv</div>
</div>
<div class="right2">bigger</div>
<div class="right2small">smaller</div>
<div class="right3collumns">
<div class="box2">Small DIv</div>
<div class="box2">Small DIv</div>
<div class="box2">Small DIv</div>
</div>
</div>
Here is one way of achieving the layout, I strongly advise, if you can, to use CSS Grid instead.
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>
You can modify the CSS/SCSS code to change the layout for different breakpoints using the CSS #media rules.
For example, you can have everything stacked, when the viewport is less than or equal to 960px.
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
.grid {
display: flex;
flex: 1;
}
.grid--col {
flex-direction: column;
}
.grid__item {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
border: 1px solid #ddd;
}
.grid__item--x2 {
flex: 2;
}
.grid--main {
background: #f5f5f5;
border: 1px dashed #999;
max-width: 960px;
margin: 50px auto;
}
#media only screen and (max-width: 960px) {
.grid {
flex-direction: column;
}
}
<div class="grid grid--main">
<div class="grid__item">1</div>
<div class="grid__item grid__item--x2">
<div class="grid grid--col">
<div class="grid">
<div class="grid__item">2</div>
<div class="grid__item grid__item--x2">4</div>
<div class="grid__item">8</div>
</div>
<div class="grid">
<div class="grid__item">3</div>
<div class="grid__item">5</div>
<div class="grid__item">6</div>
<div class="grid__item">7</div>
</div>
</div>
</div>
</div>
My question is: How can I put a margin between the 2 elements, without misaligning them in smaller screens?
I'm creating an HTML page with 2 elements disposed along a line, like this:
I made it responsive, so when I have a smaller screen, the elements are wrapped to another line:
Here's a fiddle to this: https://jsfiddle.net/5ye2sc4b/1/
Html:
<div class="container">
<div class="header">Header</div>
<div class="line">
<div class="element element1">Element 1</div>
<div class="element element2">Element 2</div>
</div>
<div class="footer">Footer</div>
</div>
CSS:
.container {
display:flex;
flex-direction: column;
margin-top: 10px;
}
.header, .footer {
background-color: lightblue;
padding: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.line {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.element {
border: 1px solid gray;
flex-grow: 1;
height: 100px;
}
If I put a right margin in element 1, it will be displayed correctly in bigger screens:
element1 { margin-right: 20px; }
But it will be misaligned to the header on smaller screens:
On the fiddler above I put some buttons to change the global container size, to simulate the problem.
While i think your approach is not the best way to create a responsive layout you might want to simply remove the margin on smaller screens:
#media (max-width: 620px) {
margin-right: 0px
}
I think this is more suitable for CSS grid where you can use gaps:
.container {
/*display: flex;
flex-direction: column; not really useful in this case*/
margin-top: 10px;
}
.header,
.footer {
background-color: lightblue;
padding: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.line {
display: grid;
/* adjust the 200px to control when elements will wrap */
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
/* margin only between columns */
grid-column-gap:16px;
}
.element {
border: 1px solid gray;
height: 100px;
}
<div class="container">
<div class="header">Header</div>
<div class="line">
<div class="element element1">Element 1</div>
<div class="element element2">Element 2</div>
</div>
<div class="footer">Footer</div>
</div>
You could do this using media queries:
Make sure your .line has flex-flow: row nowrap; the shorthand code for flex-direction: row;
flex-wrap: nowrap; initially. The children should have a flex-basis of 50%
Then let the media query (#media) do the rest.
As soon as your screen goes below 900px, apply the CSS inside the media query like so:
#media(max-width: 900px){
.line{
flex-flow: row wrap;
}
.element{
flex-basis: 100%;
}
.element1 {
margin-right: 0px;
}
this will remove the margin from your element1 aswell as set the elements to 100% flex basis, aswell as the flex wrap on the .line for it to wrap.
.container {
display:flex;
flex-direction: column;
margin-top: 10px;
}
.header, .footer {
background-color: lightblue;
padding: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
.line {
display: flex;
flex-flow: row nowrap;
}
.element {
border: 1px solid gray;
flex-grow: 1;
height: 100px;
flex-basis: 50%;
}
.element1 { margin-right: 20px; }
#media(max-width: 900px){
.line{
flex-flow: row wrap;
}
.element{
flex-basis: 100%;
}
.element1 {
margin-right: 0px;
}
Html:
<div class="container">
<div class="header">Header</div>
<div class="line">
<div class="element element1">Element 1</div>
<div class="element element2">Element 2</div>
</div>
<div class="footer">Footer</div>
</div>
I like the positioning of the two box class div's with justify-content: flex-end but I'd like to center the top img-container div vertically in the remaining space above but I'm not sure if this is possible, preferably without javascript.
The layout is for portrait orientation mobile devices. Maybe justifying the content isn't the best approach but I'd like a layout that places the form elements towards the bottom of the screen and spaces them well but responds to smaller devices by taking space from the logo area.
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
/*iPhone 4*/
height: 480px;
width:320px;
/*iPhone 6*/
/*height: 667px;
width:375px;*/
background-color: blue;
border: 1px solid red;
}
.box {
text-align:center;
height: auto;
width: 100%;
background-color: green;
border: 1px solid pink;
margin: 3px;
padding-top:20px;
padding-bottom:20px;
margin-top:20px;
margin-bottom:20px;
}
.img-container{
text-align:center;
}
<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
<div class="box">
<input type="text" placeholder="username">
<br>
<input type="password" placeholder="password">
<br>
<button>submit</button>
</div>
<div class="box">
<button>password reset</button>
<br>
<button>register</button>
</div>
</div>
You could change just a little bit of code and achieve what you want.
Fiddle: https://jsfiddle.net/gczcorn0/
I just modified your image container to be like this:
<div class="box clear img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
So this takes the same properties as the boxes below. Then I assume you don't want the background-color and border on the image box so just clear the css attributes like this:
.box.clear {
background-color: transparent;
border: none;
}
I'm not sure what you meant by how you want it to behave in smaller devices since the width is set to 320px in the example.
EDIT based on comment:
This updated fiddle shows what you can do in a situation that you expressed in the comments: https://jsfiddle.net/gczcorn0/2/
You could use display: flex on the img-container as well.
.flexcontainer {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: flex-end;
justify-content: flex-end;
/*iPhone 4 */
height: 480px;
width:320px;
/*iPhone 6
height: 667px;
width:375px;*/
background-color: blue;
border: 1px solid red;
}
.box {
text-align:center;
height: auto;
width: 100%;
background-color: green;
border: 1px solid pink;
margin: 3px;
padding-top:20px;
padding-bottom:20px;
margin-top:20px;
margin-bottom:20px;
}
.img-container{
display: flex;
flex-flow: column nowrap;
justify-content: center;
flex: 1;
}
.img-container img {
margin: 0 auto;
}
<div class="flexcontainer">
<div class="img-container">
<img src='https://wiki.maemo.org/images/thumb/d/de/Maemo.org_logo_contest_sample1_bundyo.png/300px-Maemo.org_logo_contest_sample1_bundyo.png' width='80%'/>
</div>
<div class="box">
<input type="text" placeholder="username">
<br>
<input type="password" placeholder="password">
<br>
<button>submit</button>
</div>
<div class="box">
<button>password reset</button>
<br>
<button>register</button>
</div>
</div>