So far I have tried like this. I want to set a border around the grid elements inside the grid. Is there any way to do it?
.grid{
background: cornflowerblue;
padding: 20px;
margin: 10px;
height: 500px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-gap: 30px 10px;
justify-content: center;
align-content: center;
}
.item{
font-size: 20px;
font-family: 'Montserrat', sans-serif;
line-height: 32px;
letter-spacing: 5px;
font-weight: bold;
border: 1px solid white;
text-align: center;
display: grid;
align-content: center;
justify-content: center;
}
<div class="grid">
<div class="item">A1</div>
<div class="item">A2</div>
<div class="item">A3</div>
<div class="item">A4</div>
<div class="item">A5</div>
<div class="item">A6</div>
<div class="item">A7</div>
<div class="item">A8</div>
<div class="item">A9</div>
</div>
But I want a border around the items like shown in the image.
Give higher outline, if you want a very big offset
.subgrid {
outline-offset: 50px;
}
.grid {
background: cornflowerblue;
padding: 20px;
margin: 10px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.subgrid {
display: inline-grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-gap: 30px 10px;
outline: 1px solid red;
outline-offset: 50px;
}
.item {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
line-height: 32px;
letter-spacing: 5px;
font-weight: bold;
border: 1px solid white;
text-align: center;
display: grid;
align-content: center;
justify-content: center;
}
<div class="grid">
<div class="subgrid">
<div class="item">A1</div>
<div class="item">A2</div>
<div class="item">A3</div>
<div class="item">A4</div>
<div class="item">A5</div>
<div class="item">A6</div>
<div class="item">A7</div>
<div class="item">A8</div>
<div class="item">A9</div>
</div>
</div>
Create a new div around and
.newDiv {
border: 5px solid red;
}
Related
Here is the JSfiddle complete code link:
CODE
my clock code output
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: 28px;
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
Can any one tell me how to improve this code
I tried to make is completely responsive but it is not not working,
I tired to use flex to make the element appear in center of page.
Then I use grid to create the clock layout and i didn't knew how to align the cells so I used grid again in them. I was using rem and em to make responsive code but it didn't work out well. please review my code.
This is because of the font-size of the time-box div that is not responsive (28px whatever the device size), To make it responsive I added media queries to change the font depending on the device width, As presented in this example:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
}
#media (min-width:768px) {
.time-box {
font-size: 18px;
}
}
#media (min-width:1024px) {
.time-box {
font-size: 22px;
}
}
#media (min-width:1280px) {
.time-box {
font-size: 28px;
}
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
You can as well use calc() function, so you can calculate your font size relative to the screen width like this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #0b172a;
font-family: sans-serif;
}
#container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 5rem;
color: white;
text-transform: uppercase;
}
.clock-ctr {
position: relative;
border: 2px solid white;
height: 80vh;
width: 80vw;
padding: 10px;
display: flex;
justify-content: center;
align-items: center;
}
.hour-ctr {
grid-area: hour;
}
.min-ctr {
grid-area: min;
}
.sec-ctr {
grid-area: sec;
}
.ampm {
grid-area: ampm;
background: #bc4123;
}
.time-ctr {
position: absolute;
height: 70%;
width: 90%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 10px;
grid-template-areas: "hour min sec" "ampm ampm ampm";
}
h1 {
margin-bottom: 1rem;
letter-spacing: 8px;
font-size: 2.5rem;
}
.time-box {
background: #bc4123;
border-radius: 10px;
display: grid;
justify-items: center;
align-items: center;
height: auto;
text-align: center;
font-weight: bold;
font-size: calc(18px + 0.390625vw);
}
<div id="container">
<h1 class="clock-title">Clock</h1>
<div class="clock-ctr">
<div class="time-ctr">
<div class="hour-ctr time-box">
<p class="hour-value">00</p>
<p class="hour-title">Hour</p>
</div>
<div class="min-ctr time-box">
<p class="min-value">00</p>
<p class="min-title">Minute</p>
</div>
<div class="sec-ctr time-box">
<p class="sec-value">00</p>
<p class="sec-title">Second</p>
</div>
<p class="ampm time-box">AM</p>
</div>
</div>
</div>
the issue with the CSS code in the Stack Overflow question is that the left and right values for the #nav element are set to 0. This causes the element to take up the full width of its parent element, which is likely not the intended behavior.
To fix this issue, you can try setting the left and right values to auto like this:
#nav {
position: fixed;
top: 0;
left: auto;
right: auto;
width: 100%;
height: 60px;
background-color: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
With this change, the #nav element will no longer take up the full width of its parent element and will instead be positioned at the top of the page with its width set to 100%.
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 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
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!
Faced with the problem the block of my prices has different indents everywhere. This is due to the length of the text (product name). How to make a block of prices for all the same markup. How can I do it? Help me, please. At least a small example.
html
<div class="product_grid">
<div class="product_section">
<div>
<a href="#">
<div>
<img class="product_image" src="#">
<div class="product_text">
<div class="product_name">Name</div>
<div class="product_price_block">
<div class="product_price empty">1200 ₽</div>
<div class="product_price">1800 ₽</div>
</div>
</div>
</div>
</a>
</div>
<div>
<button class="add_to_cart">Add to cart</button>
</div>
</div>
</div>
css
.product_grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
grid-row-gap: 20px;
grid-column-gap: 3%;
padding: 8px;
}
.product_grid > * {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 8px;
text-align: center;
}
.product_price_block {
display: flex;
justify-content: space-around;
border: 1px solid grey;
padding: 10px 12px;
margin-top: 3rem;
}
.add_to_cart {
border: 1px solid grey;
padding: 10px 12px;
margin-top: 3rem;
cursor: pointer;
background: none;
outline: none;
}
.product_image {
vertical-align: middle;
max-width: 100%;
}
Thanks!
You can fix the product name div height.
Try this:-
.product_name{
height: 30px;
}