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>
Related
There seems to be a problem in this next piece of code. Testing on Chrome, there is a difference of just .5 px between height and width, but when switching to device mode, the difference gets bigger (almost 10px). I do have a <meta name="viewport" content="width=device-width, initial-scale=1.0"> set.
What I need: perfect squares and perfect circles. Flexbox is used and I don't want this :after fix used to create perfect squares. What am I doing wrong?
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 52px);
}
.abc {
font-size:90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(33vw - 46px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 46px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
Not sure why you don't want to use the padding trick but it's the way to go. Your calculation won't be accurate using vw unit because you need to account for the scrollbar width
body {
max-inline-size: 1440px;
margin: 0 auto;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
}
/* this will do the trick */
.lc .abc::before {
content:"";
padding-top:100%;
}
/**/
.abc {
font-size: min(90px,18vw);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex-grow: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
If you insist on using vw you need to adjust the code like below. Notice how you will have perfect square but I had to hide the scrollbar to get the result:
body {
max-inline-size: 1440px;
margin: 0 auto;
overflow:hidden;
}
.oc {
display: flex;
justify-content: flex-start;
}
.ic {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-grow: 1;
}
.lc {
display: flex;
justify-content: stretch;
align-items: stretch;
border-radius: 25%;
border: solid 1px black;
margin: 1px;
padding: 20px;
flex: 1;
block-size: calc(50vw - 2px); /* remove only margin */
box-sizing:border-box; /* you don't have to care about padding and border*/
}
.abc {
font-size: 90px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: solid 1px black;
flex: 1;
}
#media screen and (min-width: 768px) {
.abc {
font-size: 180px;
}
}
#media screen and (min-width: 1024px) {
.oc {
flex-wrap: wrap;
}
.ic {
flex-direction: row;
flex-basis: 100vw;
}
.lc {
block-size: calc(calc(100vw/3) - 2px);
}
}
#media screen and (min-width: 1440px) {
.lc {
block-size: calc((1440px / 3) - 2px);
}
}
<div class="oc">
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
<div class="ic">
<div class="lc">
<div class="abc">A</div>
</div>
<div class="lc">
<div class="abc">B</div>
</div>
<div class="lc">
<div class="abc">C</div>
</div>
</div>
</div>
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>
I want to create template contains :
On the left : Have a image
On the right: Have 4 buttons
My examlple :
What can I do to create that design with HTMl & CSS ?
Thank you .
Try using display:flex; and display:grid; to do this. This is a sample code. Hope it helps
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.button-container {
display: grid;
grid-template-columns: 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.button {
border: 1px solid;
border-radius: 4px;
padding: 5px 5px;
text-align: center;
}
.image {
margin-right: 1rem;
}
<div class="d-flex flex-row align-items-center justify-content-center">
<img class="image" src="https://via.placeholder.com/150">
<div class="button-container">
<div class="button">
Button 1
</div>
<div class="button">
Button 2
</div>
<div class="button">
Button 3
</div>
<div class="button">
Button 4
</div>
</div>
</div>
EDIT: I have added media queries and shortened the css code in this snippet so that the button will be shown below the image in smaller screens
.main-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button-container {
display: grid;
grid-template-columns: 100px 100px;
grid-row-gap: 10px;
grid-column-gap: 10px;
}
.button {
border: 1px solid;
border-radius: 4px;
padding: 5px 5px;
text-align: center;
}
.image {
margin-right: 1rem;
}
#media (min-width: 320px) and (max-width: 480px) {
.main-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.image {
margin-right: 0;
margin-bottom: 1rem;
}
}
<div class="main-container">
<img class="image" src="https://via.placeholder.com/150">
<div class="button-container">
<div class="button">
Button 1
</div>
<div class="button">
Button 2
</div>
<div class="button">
Button 3
</div>
<div class="button">
Button 4
</div>
</div>
</div>
*{ margin: 0px; padding: 0px; box-sizing: border-box; }
.img_box_btn {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
align-items: center;
box-sizing: border-box;
}
.img_box_btn .left {
-ms-flex: 0 0 40%;
flex: 0 0 40%;
max-width: 40%;
padding: 0 15px;
}
.img_box_btn img {
max-width: 100%;
}
.img_box_btn .right {
padding: 0 15px;
-ms-flex: 0 0 60%;
flex: 0 0 60%;
max-width: 60%;
}
ul.list-btn-box {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
list-style: none;
}
ul.list-btn-box li {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 15px;
padding: 0px 15px;
}
.img_box_btn * {
box-sizing: border-box;
}
ul.list-btn-box li .btn-cus {
padding: 12px 20px;
display: block;
background-color: #000;
color: #ffff;
border: 1px solid #000;
font-size: 13px;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.img_box_btn .left,.img_box_btn .right {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
padding: 15px 15px;
}
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>responsive image and four buttons</title>
</head>
<body>
<div style="max-width: 800px; margin: 15px auto; padding: 0 15px;">
<div class="img_box_btn">
<div class="left">
<img src="https://via.placeholder.com/450">
</div>
<div class="right">
<ul class="list-btn-box">
<li><button class="btn-cus">button 01</button></li>
<li><button class="btn-cus">button 02</button></li>
<li><button class="btn-cus">button 03</button></li>
<li><button class="btn-cus">button 04</button></li>
</ul>
</div>
</div>
</div>
</body>
</html>
There are a lot of things that can be done. However, I've used bootstrap to make things simple. Please review the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Sample Project</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-12 img-col">
<img src="https://previews.123rf.com/images/iqoncept/iqoncept1406/iqoncept140600148/29496890-case-study-words-in-a-circle-or-round-stamp-with-red-ink-to-symbolize-a-business-example-or-anecdote.jpg" alt="sample" class="image">
</div>
<div class="col-lg-8 col-sm-12 btn-col">
<div class="row row-1">
<div class="col-md-6">
<button>
BTN-1
</button>
</div>
<div class="col-md-6">
<button>
BTN-2
</button>
</div>
</div>
<div class="row row-2">
<div class="col-md-6">
<button>
BTN-3
</button>
</div>
<div class="col-md-6">
<button>
BTN-4
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS for the same:
.img-col, .btn-col {
border: 2px solid black;
}
.row .img-col {
text-align: center;
}
.img-col .image {
width: 30%;
height: auto;
}
.btn-col {
text-align: center;
padding-top: 2%;
}
.btn-col .row-1{
margin-bottom: 5px;
}
This will make it look like this:
I'm having a problem with getting a background-image to show within a flexbox. Whenever I enter it manually in the HTML it shows the image, however... When I try to load it as background-image: url("imagepath") it won't load.
This is the CSS:
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #f3f3f3;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #999999;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.newsboxtop{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 3px;
background: url("images/Lightgraydient75x30.png");
text-align: center;
height: 30px;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #999999;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1280px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
#media (max-width: 1500px){
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
And this is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">
<div class="newsboxtop">
<!--////////////////////////////////////////////////////-->
<!-- images/Lightgraydient75x30.png This is for testing -->
<!--////////////////////////////////////////////////////-->
asd
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
dfg
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
ghj
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Please let me know if I'm overlooking something, or if I'm using CSS the wrong way, thank you so much.
Have you tried
background: url("../images/Lightgraydient75x30.png");
background-image is working fine, you have to set div height as per your image. check updated snippet below...
* {
box-sizing: border-box;
}
/*Style van overall body*/
body {
margin: 0;
background-color: #f3f3f3;
color: white;
}
/*Style voor h2 tekst*/
h2 {}
/* Style the header */
.header {
background-color: #999999;
padding: 50px;
text-align: center;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
.contentrow {
display: -webkit-flex;
display: flex;
}
/* 3 middelse columns (Grootte wordt bepaald in html doc (Standaard: Flex-Grow: 4;)) */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
text-align: center;
}
.newsboxtop{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
border: 3px;
background: url(https://dummyimage.com/500x800/ff0000/000000.png&text=);
text-align: center;
height: 30px;
background-size: cover;
}
.middlemenu {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0px;
height: 50px;
text-align: center;
margin: 0px;
}
/* Container for newsboxes */
.newsrow {
display: -webkit-flex;
display: flex;
}
.newsbox {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
margin-top: 30px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 30px;
min-width: 200px;
height: 225px;
text-align: center;
background-color: #999999;
}
/* Style van de footer. */
.footer {
background-color: #999999;
padding: 10px;
text-align: center;
}
/* Zorgt ervoor dat bij het krimpen de flexboxes stapelen i.p.v. naast elkaar blijven staan.*/
#media (max-width: 1280px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
#media (max-width: 1500px){
.newsrow {
-webkit-flex-direction: column;
flex-direction: column;
}
}
<div class="header">
<h2>234234</h2>
</div>
<div class="row">
<div class="column" style="background-color:#444; padding: 10px;">1337 WHEH</div>
<div class="column" style="background-color:#555; flex-grow: 4;">
<div class="middlemenu" style="background-color:#777">
<!--Hier komt menu content-->
</div>
<div class="newsrow">
<div class="newsbox">
<div class="newsboxtop">
<!--////////////////////////////////////////////////////-->
<!-- images/Lightgraydient75x30.png This is for testing -->
<!--////////////////////////////////////////////////////-->
asd
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
dfg
</div>
</div>
<div class="newsbox">
<div class="newsboxtop">
ghj
</div>
</div>
</div>
</div>
<div class="column" style="background-color:#666; padding: 10px;">1337 WHEEEH</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
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>