I need a card list layout for this I use flex. in large device everything is ok but when device becomes small and two cards can't be next to each other and go to the next line, my content it's not center
in other words, I need to center my content in all device size and when two cards come together should be space-between and center
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Please check the example above in full-page and change the responsive size
Hope this is helpful for you all in center align and i`m not use any mediaquery same code work on small screens .
.container-card {
background-color: grey;
}
.container-holder {
background-color: #ffd700;
width: calc(100% - 28px);
max-width: 1004px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 0 auto;
text-align: center;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin-top: 15px;
margin-bottom: 15px;
margin: 15px 2px;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
Use CSS grid for this:
.container-card {
background-color: grey;
direction: rtl;
}
.container-holder {
background-color: gold;
width: calc(100% - 28px);
max-width: 1004px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(481px, 1fr));
place-items: center;
grid-column-gap: 30px;
}
.request-box {
width: 481px;
height: 417px;
border-radius: 15px;
border: solid 1px #adadad;
background-color: #ffffff;
margin: 15px 0;
}
<div class="container-card">
<div class="container-holder">
<div class="request-box"></div>
<div class="request-box"></div>
<div class="request-box"></div>
</div>
</div>
to set the cards netx to each other in small devices you can use this media query:
#media(max-width: 400px){
.container-holder {
justify-content: space-around;
}
.request-box {
width: 45%;
}
}
test it . it works nicely!
Related
I really don't know what I'm doing wrong here. I want the image inside the box to stay centered when the window shrinks. Furthermore, I would have thought that align-items: center; would work, but apparently not. The colors are only relevant for me, so I understand what's going on. I don't know if there is a solution for this either, but I hope so. And please ignore the naming and order of the individual classes, I couldn't do better ...:)
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<h20>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</h20>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
h4 and h20 are empty
You're pretty close to getting the image vertically aligned as you wanted. Try this out, and see if this works the way you would like:
.megadiv {
max-width: 1600px;
margin: auto;
text-align: center;
}
.centerbox {
display: flex;
justify-content: space-between;
}
.left {
width: 64%;
background-color: red;
justify-content: space-between;
border: 2px solid gray;
display: flex;
}
.insideleft {
display: flex;
width: 20%;
background-color: yellow;
align-items: center;
text-align: center;
align-content: center;
}
.insideright {
width: 78%;
background-color: purple;
float: right;
padding-top: 2%;
text-align: left;
border-left: 2px ridge #ffa54f;
padding-left: 2%;
padding-bottom: 1%;
}
.picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.right {
width: 34%;
border: 2px solid gray;
height: 20px;
}
h7 {
color: rgb(0, 153, 158);
font-size: large;
font-family: sans-serif;
}
.textpart {
margin-bottom: 0.5%;
}
<div class="megadiv">
<div class="centerbox">
<div class="left">
<div class="insideleft">
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
<div class="insideright">
<h7>Headline</h7><br>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right">
wawaeaweew
</div>
</div>
</div>
I saw you used align-items: center; in the .insideleft CSS selector which is for aligning a container's children to the center like you want, you'll just want to make this a flexbox to make this work. To do this, simply add display: flex; to the .insideleft selector like in the example. I also removed the <h20> tag from the HTML as this is not valid or necessary.
As for the image shrinking down when the screen width is shrinked - this is because you're using percentages for the widths for all the containers and the image. If you want the image to stop shrinking after a certain point, you can add min-width: 80px; /* (this can be any number of pixels) */ to your .picture selector to make the image stop shrinking once it gets to a certain width of pixels.
Flexbox is super useful for position elements in CSS and I'd recommend looking into this more to have a better understanding. Check out this link here if you'd like an overview of the different flexbox CSS properties.
I am not 100% sure on your intent - Here I changed the class names a bit for clarity and adjusted the markup for a left-middle-right
Not a huge fan of % for padding and margin sizing myself (em feels more clear since it is based on the current font size)
Not strictly needed but I added the containing element class in a few places in CSS for clarity example: .left-pane .picture-container
.page-container {
max-width: 1600px;
text-align: center;
}
.container-box {
display: flex;
align-content: space-between;
}
.container-box .left-pane {
width: 20em;
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border: 2px solid gray;
}
.left-pane .picture-container {
width: 30%;
background-color: yellow;
align-items: center; /* vertical */
align-content: center; /* horizontal */
}
.left-pane .picture-container .picture {
width: 80%;
border-radius: 1%;
margin-top: 10%;
margin-bottom: 8%;
}
.container-box .middle-pane {
width: 70em;
background-color: #FFDDDD;
padding-top: 2%;
padding-left: 2%;
padding-bottom: 1%;
border-left: 2px ridge #ffa54f;
}
.middle-pane .headline {
color: rgb(0, 153, 158);
font-size: 1.5em;
font-family: sans-serif;
margin-bottom: 1em;
background-color: #eeeeee;
}
.middle-pane .textpart {
margin-bottom: 0.5em;
}
.container-box .right-pane {
height: 20px;
border: 2px solid gray;
}
<div class="page-container">
<div class="container-box">
<div class="left-pane">
<div class="picture-container">
<div>
<a href="">
<img class="picture" src="https://images-na.ssl-images-amazon.com/images/I/71hi8fWdX2L.jpg"> </a>
</div>
</div>
</div>
<div class="middle-pane">
<div class="headline">Headline</div>
<h4>
<div class="textpart">Authors</div>
<div class="textpart">Views <a class="" href="">Chapter 2</a></div>
<div class="textpart">Genres: Action - Adventure - Comedy</div>
<div class="textpart">Rating: ⭐⭐⭐⭐⭐</div>
</h4>
</div>
<div class="right-pane">
wawaeaweew
</div>
</div>
</div>
here is how my screen should look like:
the orange button should be on the right of the "dashboard-detail-body" and have margins to the top, left, and bottom ("dashboard-container")
this is what I tried:
<div class="dashboard-detail-body">
<div style="float: right; margin-right: 10px; margin-top: 15px;">
{{ui-5/button label="click me"}}
</div>
<div class="dashboard-container">
but I do not get the desired behavior - no margin bottom (the orange button is overlapping with the bottom div)
margin-bottom, did not solve it, how can I get the desired behavior?
The issue is with the float: right; style. This makes the element overlap.
You can solve this issue by using flex-box, with the following code:
.dashboard-detail-body{
display: flex;
flex-direction:column;
}
.align-right{
align-self: flex-end;
}
<div class="dashboard-detail-body">
<div class="align-right">
I am right
</div>
<div class="dashboard-container">
<p>a<p>
<p>b<p>
<p>c<p>
</div>
</div>
Though it was difficult to understand and recreate your problem from the available data, I assume that you want to align a button center-right inside the container. You can use flexbox to align elements inside a parent.
.container {
height: 200px;
border: solid 1px #333;
display: flex;
justify-content: right;
align-items: center;
}
button.orange {
border: none;
outline: none;
height: 1.5rem;
/* optional basic styling */
background: orange;
color: #fff;
}
<div class="container">
<button class="orange">Click Me</button>
</div>
You can try with css grid:
.dashboard-detail-body{
display: grid;
grid-template-columns: 1fr;
justify-items: center;
border: 1px solid grey;
border-radius: 2em;
}
.right{
justify-self: end;
margin: 1em 3em 1em 1em;
background-color: orange;
padding: .5em;
border-radius: .5em;
}
.dashboard-container {
display: flex;
justify-content: center;
align-items: start;
border: 1px dashed grey;
border-radius: 1.5em;
margin-bottom: 2em;
width: 95%;
height: 200px;
}
.dashboard-container > p {
padding: 1.5em 2em;
margin: 1em;
border: 1px solid grey;
border-radius: .5em;
}
<div class="dashboard-detail-body">
<div class="right">
click me
</div>
<div class="dashboard-container">
<p></p>
<p></p>
<p></p>
</div>
</div>
As you are shrinking your div with float right it frees space on the left. The clear property doesn't work.
So the solution I came up with is to keep the div full & use a button
.dashboard-detail-body {
background: #eeeeee;
border: 3px solid #bbbbbb;
border-radius: 20px;
height: 80vh;
width: 80%;
min-height: 40rem;
min-width: 45rem;
margin: auto;
}
.btn-area {
height: 5rem;
width: 100%;
/* border: 1px solid red; */
}
.btn {
background: #ff9900;
padding: 10px 15px;
border-radius: 10px;
border: 2px solid #9c7842;
/* clear: left; */
/* display: inline-block; */
float: right;
margin-right: 25px;
margin-top: 25px;
}
.dashboard-container {
border: 3px solid #bbbbbb;
margin: auto;
width: 75%;
height: 75%;
border-radius: 20px;
display: flex;
justify-content: center;
/* align-items: center; */
}
.box {
border: 3px solid #bbbbbb;
width: 6.5rem;
height: 6.5rem;
border-radius: 20px;
float: left;
margin: 1rem;
}
<div class="dashboard-detail-body">
<div class="btn-area">
<button class="btn">Click Me</button>
</div>
<div class="dashboard-container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
I have 2 flex box containers. One of these is in row for and the other is in column for. What I am need to do is to have the items be in a cascading way. All items should have the same height and width but should be leveled in different positions.
Adjusting them margin of the container and items is not working.
HTML
<div class="flex-review">
<div class="review-card"></div>
<div class="review-card"></div>
<div class="review-card"></div>
</div>
<div class="flex-container">
<div class="main-card" id="higest-card"></div>
<div class="main-card"></div>
<div class="main-card"></div>
</div>
CSS (firts part is for bottom cotainer with big items, second part is for top cotainer with small items)
.flex-container{
display: flex;
justify-content: center;
align-content: space-between;
}
.main-card{
height: 250px;
width: 400px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 400px;
margin-right: 40px;
}
.flex-review{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.review-card{
height: 60px;
width: 500px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-right: 100px;
margin-top: 50px;
}
Currently looks like this:
Is this what you're after?
I set the divs to have relative positioning, and simply moved them using right/bottom.
.flex-container{
display: flex;
justify-content: center;
align-content: space-between;
}
.main-card{
height: 250px;
width: 400px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 400px;
margin-right: 40px;
position: relative;
}
.main-card:nth-child(1) {
bottom: 100px;
}
.main-card:nth-child(2) {
bottom: 50px;
}
.flex-review{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.review-card{
height: 60px;
width: 500px;
background-color: antiquewhite;
box-shadow: 5px 10px 18px #b8b5b5;
border-radius: 5px;
margin-top: 50px;
position: relative;
}
.review-card:nth-child(1) {
right: 100px;
}
.review-card:nth-child(2) {
right: 50px;
}
<div class="flex-review">
<div class="review-card"></div>
<div class="review-card"></div>
<div class="review-card"></div>
</div>
<div class="flex-container">
<div class="main-card" id="higest-card"></div>
<div class="main-card"></div>
<div class="main-card"></div>
</div>
I have a Popular News section where I'm trying to display six news articles in a flex pattern. The problem I'm having is that I cannot get the flex items to be closer together. How do I do that?
EDIT: I've added the entire code for the bottom half.
This is how it currently looks:
This is how I want it to look:
.firstsection {
width: 100%;
height: 100;
}
.firstsection h1 {
color: rgb(255, 255, 255);
display: block;
font-size: 36px;
font-weight: 300;
line-height: 42.0001px;
padding-bottom: 14px;
text-align: center;
}
.firstsection {
display: block;
width: 100%;
height: 400px;
background-color: #414141;
float: left;
}
.bottomheader {
margin-top: 40px;
color: white;
font-size: 40px;
position: relative;
top: -20px;
}
.READMORE {
display: inline;
position: relative;
top: -40px;
left: 642px;
font-size: 16px;
text-align: center;
border: 1px solid white;
height: 50px;
padding: 20px;
}
.pop .READMORE a {
color: white;
text-decoration: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
color: black;
width: 30%;
border-top: 3px solid red;
background-color: white;
height: 80px;
}
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.pop {
float: right;
height: 100px;
width: 100%;
text-align: center;
}
<section style="background-color: #293352" class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section style="background-color: #293352" class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content</h3>
</section>
All you really need to do is add align-content: flex-start. This aligns wrapped lines to the start of the flex container and has similar options as align-items. See align-content
I created a fiddle
.firstsection {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
In this example I changed the 'cards' to divs and used a card class, and added a little padding. This may or may not be what you want but maybe it helps.
You can use the CSS GRID to align them properly.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.firstsection {
display: block;
width: 100%;
background-color: #293352;
padding: 50px 20px;
}
h3 {
color: black;
width: 100%;
border-top: 3px solid red;
background-color: white;
height: 130px;
margin: 0;
}
.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
<section class="firstsection">
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
<h3>content</h3>
</section>
Codepen: https://codepen.io/manaskhandelwal1/pen/XWjobLx
here is another approach with grid , using pseudo elements to shrink the visible rows to the center, and sizing a few elements via width and max-width:
example below to run in fullpage mode then resize the window to see if the behavior is what you expect.
body {
margin: 0;
background-color: #293352;
}
.grid {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
.pop {
color: white;
text-align: center;
position: relative;
padding: 1em 10em;
}
.pop h4 {
position: absolute;
right: 1rem;
top: 0.5rem;
border: solid 1px;
padding: 1em;
}
section.firstsection {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 1fr repeat(auto-fill, max-content) 1fr;
align-items: center;
width: max-content;
max-width:100%;
margin: auto;
gap: 1em;
}
.firstsection:before,
.firstsection:after {
content: "";
grid-column: span 3;
}
.firstsection > * {
box-sizing: border-box;
min-width: 26%;
background: white;
height: 100%;
padding: 1em;
border-top: solid red;
max-width:30vw;
}
<div class="grid">
<section class="pop">
<h1 class="bottomheader">Popular News</h1>
<h4 class="READMORE">READ MORE</h4>
</section>
<section class="firstsection">
<h3 class="h1">content</h3>
<h3 class="h2">content</h3>
<h3 class="h3">content</h3>
<h3 class="h4">content <br> and an extra line</h3>
<h3 class="h5">content</h3>
<h3 class="h6">content or grow the column to my width if there's enough room.</h3>
</section>
</div>
here is a codepen with a grid of 9 boxes to play with : https://codepen.io/gc-nomade/pen/dypwYvY
HTML:
<div id="wrap">
<div id="block1"></div>
<div id="block2"></div>
</div>
CSS:
div#wrap{
margin-top: 3em;
border: solid 1px black;
text-align: center;
}
div#wrap *{
display: inline-block;
width: 12.5em;
margin-top: 1em;
height: 8em;
}
div#wrap *:not(:last-child){
margin-right: 8em;
}
#block1{
background: orange;
}
div#wrap #block2{
background: magenta;
}
These 2 blocks are supposed to be centered in responsive design mode. When the screen is wide enough to have 2 blocks in a row, the code works. But when I narrow the screen down, the top block is shifted to the left because of the margin:
fiddle
Is it possible to fix this without media queries?
Edit
I tried flex-box:
div#wrap{
margin-top: 3em;
border: solid 1px black;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
fiddle2
A solution is to use flex and justify-content:space-around and remove margin:
div#wrap {
margin-top: 3em;
border: solid 1px black;
justify-content:space-around;
display: flex;
flex-wrap: wrap;
}
div#wrap * {
display: inline-block;
width: 12.5em;
margin-top: 1em;
height: 8em;
}
#block1 {
background: orange;
}
#block2 {
background: magenta;
}
<div id="wrap">
<div id="block1"></div>
<div id="block2"></div>
</div>
If you use a container with negative margin, you don't need to vary the margin for the endpoints of the rows at different breakpoints and you can just go with inline-block. I set font-size to zero in the container so I can calculate my widths using percents without worrying about white space.
div#wrap {
margin-top: 3em;
border: solid 1px black;
padding: 20px;
text-align: center;
}
.block {
display: inline-block;
width: 12.5em;
margin: 20px;
height: 8em;
font-size: 16px;
}
.block-container {
margin: -20px;
font-size: 0;
}
#block1 {
background: orange;
}
#block2 {
background: magenta;
}
<div id="wrap">
<div class="block-container">
<div class="block" id="block1"></div>
<div class="block" id="block2"></div>
</div>
</div>