I would like to program a web that has 3 columns in a PC and a single column in a smartphone. The problem is that the class "item" inside my media query doesn't seem to work. Somehow the main "item" is always working even though I use a PC, showing two columns instead of three.
This is the HTML code:
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
margin-left: 32px;
margin-right: 32px;
margin-bottom: 32px;
width: 311px;
height: 200px;
left: 565px;
top: 624px;
background: #C15D5D;
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.item.green {
background-color: #71B083;
}
.item.yellow {
background-color: #D2BB68;
}
#media (min-width: 1281px) {
.item {
border-style: solid;
flex: 0 32%;
height: 100px;
margin-bottom: 2%;
/* (100-32*3)/2 */
width: 311px;
height: 200px;
left: 565px;
top: 624px;
background: #C15D5D;
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.item.green {
background-color: #71B083;
left: 212px;
}
.item.yellow {
background-color: #D2BB68;
left: 918px;
}
}
<body>
<div class="container">
<div class="item green">1</div>
<div class="item">2</div>
<div class="item yellow">3</div>
<div class="item green">4</div>
<div class="item">5</div>
<div class="item yellow">6</div>
<div class="item green">7</div>
<div class="item">8</div>
<div class="item yellow">9</div>
</div>
</body>
The width of the elements is 32%. The margin on each side is 32px;
To have three elements side-by-side you need to fit 192px of margin into the 4% of space that is left over.
For that to happen, the content width of the container needs to be 4608px, so the window would need to be much wider than 1281px.
Related
I am creating a responsive front page with articles that resize with the page. I have a div 'flex-container' which will contain 3 or 4 articles, maybe more. If the page is increased in size, the articles spread out, and if the page is reduced in size they get pushed together and overlap slightly and the user can scroll right to see the articles on a screen.
I want the left side of the 'flex-continainer' div to stay pinned to the left side of the screen and only the right hand side of it to flow off the right hand side of the screen, so the first article is always visible and the user has to scroll right to see the rest. I am having difficulty doing this and making the scroll bar appear properly. As the screen is reduced in size, the center of the 'flex-container' div remains in the center of the screen, and the articles overflow off the left and right hand side of the screen. So the left hand side of the first article is not visible.
.flex-container {
display: flex;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
align-items: center;
justify-content: space-evenly;
background-color: grey;
overflow-x: scroll;
}
.article {
display: flex;
width: 30%;
min-width: 200px;
max-width: 400px;
height: 50%;
padding: 20px;
margin-left: -30px;
border: solid 4px white;
border-radius: 16px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
}
.article:hover {
z-index: 1;
}
h2 {
font-size: 2.5vw;
}
<div class="flex-container">
<div class="article">
<h2>Heading 1</h2>
</div>
<div class="article">
<h2>Heading 2</h2>
</div>
<div class="article">
<h2>Heading 3</h2>
</div>
</div>
I think if you set margin-right for the first article to 0 and omit justify-content for the container you will get the desired result.
Working example:
.flex-container {
display: flex;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
align-items: center;
background-color: grey;
overflow-x: scroll;
}
.article {
display: flex;
width: 30%;
min-width: 200px;
max-width: 400px;
height: 50%;
padding: 20px;
margin-left: -30px;
border: solid 4px white;
border-radius: 16px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
}
.article:first-child {
margin-left: 0;
}
.article:hover {
z-index: 1;
}
h2 {
font-size: 2.5vw;
}
<div class="flex-container">
<div class="article">
<h2>Heading 1</h2>
</div>
<div class="article">
<h2>Heading 2</h2>
</div>
<div class="article">
<h2>Heading 3</h2>
</div>
</div>
Thanks to nikola pavicevia and biberman. Your answers didn't quite work for me but helped me get to a solution. The desired behaviour can be achieved with setting justify-content to flex-start and padding left to 50px on the flex container and margin-right to auto on the articles.
.flex-container{
display: flex;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
padding-left:50px;
align-items: center;
justify-content:flex-start;
background-color: grey;
overflow-x: scroll;
}
.article{
display: flex;
width: 30%;
min-width: 200px;
max-width: 400px;
height: 50%;
padding: 20px;
margin-left: -30px;
margin-right:auto;
border: solid 4px white;
border-radius: 16px;
background: linear-gradient(270deg, rgba(0, 0, 0, 0.8), rgb(77, 74, 74));
box-shadow: -10px 0px 10px 10px rgba(0, 0, 0, 0.3);
z-index: 0;
}
.article:hover{
z-index: 1;
}
h2{
font-size: 2.5vw;
}
<div class="flex-container">
<div class="article">
<h2>Heading 1</h2>
</div>
<div class="article">
<h2>Heading 2</h2>
</div>
<div class="article">
<h2>Heading 3</h2>
</div>
</div>
I am trying to create a big rectangle with some child rectangles slotted inside it in HTML. I thought it would be simple but my CSS is visibly poor :(.
Currently, I am able to create the outer div and the inner divs with fixed positions and that breaks if the screen resizes etc. I want to make it responsive. The fiddle is # https://jsfiddle.net/q4smybcv/
.outer-div {
display: inline-block;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
position: fixed;
border: 1px solid blue;
}
<html>
<head>
</head>
<body>
<div class="outer-div">
<div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
<div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
<div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
<div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
</div>
</body>
</html>
Any help is appreciated
Flexbox can manage all this without positioning at all.
We can add the inner divs in order and then switch the order they layout using flex-direction. After that it's just a matter of alignment to whichever end you require,
.outer-div {
display: inline-flex;
flex-direction: column-reverse;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
vertical-align:top;
}
.top {
justify-content: flex-end;
}
.bottom {
justify-content: flex-start;
}
.inner-div {
border: 1px solid blue;
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.blue {
background:lightblue;
color:white;
}
.push {
margin-top:auto;
}
<div class="outer-div top">
<div class="inner-div blue">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
<div class="outer-div top">
<div class="inner-div blue push">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
<div class="outer-div bottom">
<div class="inner-div blue">1</div>
<div class="inner-div">2</div>
<div class="inner-div">3</div>
<div class="inner-div">4</div>
</div>
I really really recomend you read this: Grid-Layout-Tutorial with examples
It wont take you more than 20 minutes to find what you need
Here a lil snipped of my current Project:
.upper-grid-container {
display: grid; // most important
grid-template-columns: repeat(4, 1fr); //it sooo easy to tell how many columns you want
grid-template-rows: auto;
grid-column-gap: 0.1rem;
grid-row-gap: auto;
}
That way I was able to create this very dynamic layout
You can do it using flex very easily. Also, you can use grid as well.
.outer-div {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: 150px;
width: 80%;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
min-width: 50px;
border: 1px solid blue;
margin: 20px;
}
<html>
<head>
</head>
<body>
<div class="outer-div">
<div class="inner-div" id="inner-div-4" style="width: 28px; height: 28px; top: 248px; left: 469px;"></div>
<div class="inner-div" id="inner-div-3" style="width: 28px; height: 28px; top: 220px; left: 469px;"></div>
<div class="inner-div" id="inner-div-2" style="width: 28px; height: 28px; top: 192px; left: 469px;"></div>
<div class="inner-div" id="inner-div-1" style="width: 28px; height: 28px; top: 164px; left: 469px;"></div>
</div>
</body>
</html>
Fixed position puts your content relative to the viewport. However the problem is you inline sytles. You'r top: and left: properties. Because you need a REALTIVE positioned element to wich those divs can refer.
.container {
position: relative;
}
.outer-div {
display: inline-block;
position: absolute;
height: 150px;
width: 30px;
border: 3px solid grey;
margin-left: 10px;
margin-right: 10px;
}
.inner-div {
border: 1px solid blue;
width: 28px;
height: 28px
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="outer-div">
<div class="inner-div" id="inner-div-4"></div>
<div class="inner-div" id="inner-div-3"></div>
<div class="inner-div" id="inner-div-2"></div>
<div class="inner-div" id="inner-div-1"></div>
</div>
</div>
</body>
</html>
I have two squares inside of a container that are overlapping using transform: translate and I want to remove the padding to the right of the blue square so that the container perfectly fits the width of the children. Please see image for clarification.
Picture of issue
I’ve tried sizing the container to 90px, which should be the width of the children (50px + 50px - 10px), but when I do this the blue box drops to the next row. Why does it do this? I also tried applying padding-right: 0 but nothing changed.
.container {
width: 110px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
I would like there to be no left or right padding.
Use position: absolute with top and left/right, don't forget position: relative on the container:
.container{
width: 90px;
border: 1px solid black;
padding-right: 0;
position: relative;
}
.box{
height: 50px;
width: 50px;
display: inline-block;
}
.one{
background: red;
}
.two{
background: blue;
position: absolute;
left: 40px;
top: 15%;
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
Just add a negative margin-right to second square
.container {
width: 94px;
height: 57px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
margin-right: -10px;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
I'm trying to make a grid layout that's responsive with a 15px coloured border, it works ok but it when there's multiple grids, it doubles up the border i.e 30px where it joins.
https://jsfiddle.net/exm8xsgx/
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.one {
height: 50vh;
width: 25%;
border-style: solid;
border-color: red;
border-width: 15px;
float: left;
}
<div class="container">
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
</div>
This is another method I've tried. When browser width is restricted, the grids start to stack up and the border doubles up again, it should always be 15px whether they are next to each other or stacked.
https://jsfiddle.net/7bxtt82r/24/
html,
body {
height: 100%;
width: 100%;
}
.container {
height: 100%;
width: 100%;
}
.one:first-child {
height: 50vh;
width: 20%;
border-style: solid;
border-color: red;
border-left-width: 15px;
border-top-width: 15px;
border-bottom-width: 15px;
border-right-width: 15px;
float: left;
}
.one:not(:first-child) {
height: 50vh;
width: 20%;
border-style: solid;
border-color: red;
border-left-width: 15px;
border-top-width: 15px;
border-bottom-width: 15px;
border-right-width: 15px;
float: left;
margin-left: -15px;
}
<div class="container">
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
</div>
I also don't know how many grids there will be so they will just continue to stack up.
You can use CSS table, and set border-spacing to 15px, example:
body {
margin: 0;
}
.row {
display: table;
table-layout: fixed;
border-collapse: separate;
border-spacing: 15px;
width: 100%;
background: red;
}
.one {
display: table-cell;
background: white;
}
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
EDIT
If you need the items to wrap for different viewport width, you can use flexbox + box-shadow + media queries.
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 15px;
}
.one {
flex-basis: 25%;
box-shadow: 0 0 0 15px red;
background: white;
}
#media (max-width: 992px) {
.one {
flex-basis: 50%;
margin-bottom: 15px;
}
}
#media (max-width: 768px) {
.one {
flex-basis: 100%;
}
}
<div class="row">
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
<div class="one">four</div>
</div>
Your external borders can stay on 15px but the border which touches another one has to be devided by 2 if you want a clean look with a same border around.
I used a default border of 10px and 20px for those not touching each other. (You can do the opposite: default 20px and 10px for those touching)
I dealt with this while building my simon game here
.squareCircled {
height: 250px;
width: 250px;
border: 10px solid gray;
}
.green {
background-color:#01B600; /*green*/
border-top-left-radius: 100%;
border-top:20px solid gray;
border-left:20px solid gray;
cursor: pointer;
}
How could I go about constructing something like this with pure CSS?
This is how far I've gotten so far: Fiddle
I'm struggling with how to get that rounded corner there, even if I continue to add additional spans.
CODE:
body {
background: #000;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: 10% auto;
}
.top-right {
position: absolute;
top: -10px;
right: 0;
width: 50px;
height: 1px;
background: white;
border-radius: 5px;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
h3 {
color: white;
}
<div class="container">
<span class="top-right"></span>
<div class="box">
<h3>Content</h3>
</div>
</div>
you can achieve that by using pseudo elements ::before/::after in .box using the properties border and border-radius
body {
background: #000;
}
.container {
width: 300px;
height: 150px;
margin: 3% auto 0 /* changed for demo */
}
h3 {
color: white;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.box::before,
.box::after {
content: "";
position: absolute;
border: solid white;
width: 50px;
height: 50px;
}
.box::before {
top: -15px;
left: -15px;
border-radius: 15px 0; /* top-left */
border-width: 5px 0 0 5px;
}
.box::after {
bottom: -15px;
right: -15px;
border-radius: 0 0 15px; /* bottom-right */
border-width: 0 5px 5px 0;
}
<div class="container">
<div class="box">
<h3>Content</h3>
</div>
</div>
Using pseudo-elements would be the ideal solution.
This answer is just an alternative. Although not semantically elegant, it's crudely effective.
Create a container with four divs.
The first div will be the white border.
The last div will be your red box.
The two divs in the middle will be used to conceal areas of the white border.
The HTML is quite simple:
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4">
<h3>Content</h3>
</div>
</div>
With absolute positioning, .box2 (green) and .box3 (blue) can be moved to cover the border.
The order of the boxes in the source doesn't really matter. But with the HTML above there is no need for the z-index property.
Now, the only thing left is to change the background color of boxes 2 and 3 to black.
Full code:
body {
margin: 0;
height: 100vh;
background-color: black;
display: flex;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: auto;
}
.box {
position: absolute;
width: 300px;
height: 150px;
border-radius: 15px;
}
.box1 {
border: 5px solid white;
width: 320px;
height: 170px;
top: -14px;
left: -15px;
}
.box2 {
background-color: black;
top: -30px;
left: 30px;
}
.box3 {
background-color: black;
top: 30px;
left: -30px;
}
.box4 {
background-color: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4">
<h3>Content</h3>
</div>
</div>