Flexbox responsive cards - html

In my current desktop markup, I'm trying to add a 800px media query. In the desktop version, I have 2 rows of cards, that in the 800px bp, I want 2 columns of 4 cards each. How can I achieve this?
.sub-section .blank-containers {
width: 250px;
height: 250px;
background: rgb(197, 179, 196);
margin: 5px;
display: flex;
justify-content: space-evenly;
border-radius: 10px;
border: 1px solid;
}
.sub-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
margin-top: 10px;
border: 1px solid;
}
#media (max-width: 800px) {
section.sub-section {
flex-direction: column;
flex-wrap: wrap;
}
}
<section class="sub-section">
<div class="img1">
<div class="blank-containers"></div>
<p>image One</p>
</div>
<div class="img2">
<div class="blank-containers"></div>
<p>image Two</p>
</div>
<div class="img3">
<div class="blank-containers"></div>
<p>image Three</p>
</div>
..........
</div>
</section>
</section>


Add a common class with img1, img2, img3, ..... which will take 50% of the parent container width.
like
.img {
width: 50%;
display: flex;
justify-content: center;
}
And then
<section class="sub-section">
<div class="img1 img">
<div class="blank-containers"></div>
<p>image One</p>
</div>
<div class="img2 img">
<div class="blank-containers"></div>
<p>image Two</p>
</div>
<div class="img3 img">
<div class="blank-containers"></div>
<p>image Three</p>
</div>
..........
</div>
</section>
</section>
Hope it will work for you.

Related

How to align cards horizontally with an equal top border, with CSS?

How to align display: inline-block cards horizontally with an equal top border, with CSS?
Why is there a unequal top boder for each card when you open the following snippet in Full page width?
I used a fixed height and width for each .card element so I expected that it would be aligned.
Note: I also tried with display: table-cell but then I lost the fact that it's fluid and that the cards auto-adapt to the browser width (I'd like to keep an automatic number of cards per row, fitting the browser width, without having a horizontal scrollbar).
#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

#main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

do you mean something around these lines ?
#main {
display: flex;
gap: 40px;
flex-wrap: wrap;
width: 100%;
}
.cell { display: inline-block; }
.card { border: 1px solid black; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

You could add vertical-align: middle to your cell class.
.cell { display: inline-block; vertical-align: middle;}

Super easy with flex and grid altogether. Flex is good for self center and adjustment. Grid will help us for the whole page margins and alignment:
.container {
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
text-align: center;
}
You can adjust the width and height of the card to fit your needs, and also modify the padding and text alignment as desired.
P.S: Also, if you demand scrollbars to work, don't use flexbox. Change it to grid:
.card {
display: flex;
}
Here is the coding block. Will be my first time so behold:)
.container {
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.card {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
text-align: center;
}
.topnav {
white-space: nowrap;
display: grid;
grid-auto-flow: column;
overflow-x: scroll;
width: 20rem;
}
.topnav a,
.topnav button {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
<div class="container">
<div class="twitter-card">
<p>Here is the card</p>
<textarea cols="40" rows="10" ></textarea>
<div class="topnav">
<button>BIST </button>
<button>BIST Fav</button>
<button>EMTIA </button>
<button>Other</button>
<button>Other</button>
<button>Other </button>
<button>Other </button>
</div>
</div>
</div>

Container with several boxes and centered items

I am struggling with my code. I need 8 boxes (2 columns with 4 rows) and the content shall be centered (horizontally and vertically). The content will be either an image or a text. The boxes shall have 50% of the width and there shall be space between the two boxes on one line. I tried different ways, but I wasn't successful.
My current code looks like this:
.desc {
display: grid;
grid-template-columns: 50% 50%;
padding-bottom: 30px;
text-align: center;
}
.image {
height: 200px;
max-height: 300px;
max-width: 500px;
object-fit: cover;
object-position: center;
}
.text {
text-align: center;
vertical-align: middle;
}
<div class="desc">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>

If you check the below example, there are 8 boxes which are aligned in 2 columns and 4 rows with contents are vertically and horizontally centred. Check it and let me know if this is what you are looking for
* {
box-sizing: border-box;
}
section {
display: flex;
flex-wrap: wrap;
border: 1px solid red;
}
div {
flex: 1;
display: inline-flex;
max-width: 50%;
min-width: 50%;
border: 1px solid #ddd;
justify-content: center;
align-items: center;
text-align: center;
}
.bg-image {
background-image: url('https://i.ytimg.com/vi/k-POG1-Cp1k/maxresdefault.jpg');
background-size: cover;
min-height: 200px;
}
<section>
<div>1</div>
<div>2</div>
<div>3sdass asd assadas asd asdasadas asd asdasdassdaasasd sd as as</div>
<div>4</div>
<div class='bg-image'>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</section>
EDIT
Have updated the snippet with an item with a background-image, the image will automatically resize.

Flex Implementation. An another way.
If you want the texts in the tesxt section to be in two seperate lines, use flex-direction: column; for .text class
.desc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.image, .text {
display: flex;
flex: 1 1 50%;
align-items: center;
justify-content: center;
padding: 5px;
box-sizing: border-box;
border: 1px dashed black;
flex-direction: column;
}
.image img {
max-width: 100%;
}
<div class="desc">
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
<div class="image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>

.desc,
.desc_inner {
width: 99%;
overflow: hidden;
margin: 0px auto;
}
.desc_inner {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 2px dashed #f69c55;
}
.text {
width: 100%;
text-align: center;
}
<!-- today -->
<div class="desc">
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
<div class="desc_inner">
<div class="desc image">
<img src="https://homepages.cae.wisc.edu/~ece533/images/mountain.png">
</div>
<div class="text">
<b>Text</b>
<p>Text</p>
</div>
</div>
</div>

How to get nested css flex to have the right width after wrap in this setup?

I have this mockup, there are some nested containers. some of the link-class have multiple elements (par and ref) and I want them to display next to each other if there's space, but responsively move them below each other when total width gets smaller.
It works somewhat, but I expect (want) the link-element containing two childs to return to the same width as the link-element with one single child as it wraps.
For some reason, it remains wider than the single-child ones.
Any hints appreciated!
Code:
let name = 'world';
:global(body) {
margin: 0;
padding: 0
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: gray;
}
.Container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: lightblue;
padding: 3px
}
.linkContainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3px;
background-color: salmon;
}
.par {
width: 80vw;
max-width: 300px;
background-color: red
}
.links {
display: flex;
flex-flow: row wrap;
padding: 3px;
background-color: orange
}
.ref {
background-color: olive;
width: 30vw;
max-width: 100px
}
.item {
width: 80vw;
max-width: 300px;
background-color: steelblue
}
<div class="main">
<div class="Container">
<div class="item">
header
</div>
<div class="linkContainer">
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="Container">
<div class="item">
another header
</div>
<div class="linkContainer">
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
</div>
</div>
</div>
</div>
</div>

you could simply add a max-width:300px; to .links and have the box in size but then you couldn't have the desired stacking effect you wanted so i went a bit further and with the help of css variables and media queries and adding a class .single to single .pars which didn't have a .ref after them, i came up with this:
:root {
--ref-size: 100px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.main {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background-color: gray;
}
.Container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: lightblue;
padding: 3px
}
.links {
min-width: 300px;
display: flex;
flex-flow: row wrap;
padding: 3px;
background-color: orange;
}
.par {
width: calc(100% - var(--ref-size));
background-color: red;
}
.ref {
background-color: olive;
width: var(--ref-size);
}
.item {
width: 80vw;
max-width: 300px;
background-color: steelblue
}
#media all and (max-width:300px){
.par{
width: 100%;
}
}
#media all and (min-width: 300px){
.par.single{
width: 100%;
}
}
<div class="main">
<div class="Container">
<div class="item links">
header
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="item links">
another header
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
<div class="links">
<div class="par single">
some text
</div>
</div>
<div class="links">
<div class="par">
some text
</div>
<div class="ref">
a ref
</div>
</div>
</div>
</div>

Aligning text always in the center of div next to image?

https://jsfiddle.net/joel081112/6yud4bvo/3/
I have this fiddle which shows my current situation. I cant get my text to always be aligned in the middle of the div next to the image. At the minute the text stays level with the top of the div.
I have tried vertical-aligned and top: 50% but I must be missing something easy
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
.homeIm1 {
height: auto;
float: right;
}
.item {
display: flex;
width: 100%;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item > div {
width: 50%;
}
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
That code is the crux of what I'm using

Since your .item element is a flexbox set align-items: center on the item:
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
}
.homeInfo2 {
padding: 20px;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>

Try using flex.
You have to create a div next to the image and then justify-content-center and align-items-center. For more information use google :) Especially css-tricks would be helpful! CSS-Tricks

Just add align-items: center; in your item class.
.item {
display: flex;
width: 100%;
align-items: center;
}
.item:nth-child(odd) {
flex-direction: row-reverse;
}
.item>div {
width: 50%;
}
.homeIm1 {
height: auto;
float: right;
}
.homeInfo2 {
padding: 20px;
height: auto;
text-align: center;
float: left;
}
img {
max-width: 100%;
height: auto;
}
#media (max-width: 500px) {
.item,
.item:nth-child(odd) {
flex-direction: column;
}
.item>div {
width: 100%;
}
}
<div class="container">
<article class="item">
<div class="homeInfo2">
some text 1
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text 2
</div>
<div class="image">
some image 2
</div>
</article>
<hr>
<article class="item">
<div class="homeInfo2">
some 1 text blah
</div>
<div class="homeIm2">
<img src="https://cdn1.imggmi.com/uploads/2019/10/11/13fad36a93db836e4eaa1906b8f16433-full.jpg">
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
<hr>
<article class="item">
<div class="text">
some text
</div>
<div class="image">
some image
</div>
</article>
</div>

Simple css for 3 equal rows per line doesn't work

I have simple flex rows which I'm trying to line them on one line but for some reason it doesn't work. They are one under another.
I have created demo here:
https://jsfiddle.net/L2xor1jf/1/
.page-content {
max-width: 1366px;
width: 100%;
margin-left: auto;
margin-right: 10%;
padding-top: 50px;
}
section {
display: block;
}
.flex-container{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex-container>div {
flex-basis:30%;
margin:5px;
}
<section class="page-content">
<div id="site-main">
<div class="flex-container">
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
</div>
</div>
</section>

Looks like you forgot display: flex.
.flex-container{
display: flex;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
Edit: An explanation... You need the display property to define the container as a flexbox and that is what tells the children of that element that they should use a flex context.

Your flex container is missing the flex style
.page-content {
max-width: 1366px;
width: 100%;
margin-left: auto;
margin-right: 10%;
padding-top: 50px;
}
section {
display: block;
}
.flex-container{
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display:flex;
}
.flex-container>div {
flex-basis:30%;
margin:5px;
}
<section class="page-content">
<div id="site-main">
<div class="flex-container">
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
<div class="container box">
<div class="item">
<p class="headline font--h5 accent--teal">Title title</p>
<div class="fullwidth">
</div>
<div class="font--h5 body body--dark">
Some text
</div>
</div>
<p class="read-more">Read More</p>
</div>
</div>
</div>
</section>