Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I successfully created the grid, with the CSS display:grid; property, like this:
1 2
3 4
5 6
But I'm struggling with creating the offset, like this:
http://share.activ.is/Yjy8xZ
Anyone?
Here is the code:
.grid-container {
display: grid;
grid-template-columns: auto auto;
padding: 10px;
}
.grid-item:nth-child(2n) {
border: 2px dashed red;
margin-top: 10px;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I would like to create something like this.....
However, when i put text in one of the grid items.. the div stretches like this
You just need to add grid-template-columns in your css like this:-
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #000;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to make responsive web page and I would like to place three divs in one column for small screens and in two for bigger one. The problem is that this does not looks so good, unless middle one goes to the top like this:
I got JFiddle with this example: https://jsfiddle.net/usr151/kjz0459a/5/
My question is how to do id in CSS (+bootstrap) the easiest way? I'm not very experienced in styling, so I would be glad for any advice and tools I could use.
<div class="container">
<div class="row">
<div class="div3 col-md-6 order-md-2">
3
</div>
<div class="div2 col-12">
1
</div>
<div class="div1 col-md-6 order-md-2">
2
</div>
</div>
</div>
Is it Correct or you meant something else
You can use a single container and sm/xl class :
example
.div1 {
height: 50px;
background-color: #cffadc;
}
.div2 {
height: 100px;
background-color: #cfd4fa;
}
.div3 {
height: 20px;
background-color: #faeacf;
}
.container {
margin-bottom: 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="div1 col-12 order-1">
1
</div>
<div class="div2 col-xl-7 col-sm-12 order-1">
2
</div>
<div class="div3 col-xl-5 col-sm-12 order-0 order-xl-1">
3
</div>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm super new to the world of coding, so please bear with me ;)
I want to know if I could use a flexbox around an image to make it responsive rather than the "img-responsive" class?
I would imagine this would also be the better option for resizing a box that has an image and text in it?
B.
Responsive image manipulation with flex properties
For production level code we have to add CSS Reset Code
.container {
max-width: 1200px;
display: flex;
align-items: center;
-webkit-justify-content: center;
/* Safari */
justify-content: center;
}
.item {
padding: 10px;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="container">
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image1">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image2">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image3">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image4">
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been looking around at flex examples and having a go myself. I don't think this is possible with flexbox, but I thought I'd check before giving up on it.
The layout can be seen here:
All three elements are in the same parent div and unforntunately I'm stuck with this HTML structure so my options are limited. Sorry about the vague title. I couldn't really articulate the layout in words.
Thanks.
Since some kind soul has seen fit to answer...here's my version...no extra HTML required.
Codepen Demo
.wrapper {
width: 50%;
margin: 25px auto;
height: 300px;
border: 1px solid grey;
justify-content: space-between;
align-content: space-between;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.box {
width: 49.5%;
background: #000;
}
.left {
flex: 0 0 100%;
/* equals height */
background: lightblue;
}
.right.top {
flex: 0 0 39%;
/* equals height */
}
.right.bottom {
flex: 0 0 39%;
/* equals height */
}
<div class="wrapper">
<div class="box left"></div>
<div class="box right top"></div>
<div class="box right bottom"></div>
</div>
As I'm trying to learn flex myself I thought I'd give this a go and came up with the following (otherwise this question should be closed for being too broad)
.container {display:flex;}
.column {flex:1;}
.row {flex:1; background-color:black;}
#outer {flex-direction:row; height:250px;} /* height for example purpose only */
#left {background-color:black; margin-right:20px;}
#right {flex-direction:column;}
#top {margin-bottom:50px;}
<div class="container" id="outer">
<div class="column" id="left"></div>
<div class="column container" id="right">
<div class="row" id="top"></div>
<div class="row" id="bottom"></div>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I am looking for a way to stack card images one over another with CSS:
My code:
<ul class="stack">
<li class="card"><img src="4h.png"/></li>
<li class="card"><img src="9c.png"/></li>
<li class="card"><img src="5c.png"/></li>
</ul>
Is it possible to make it with just CSS?
You could use margin or padding to move the cards to the left.
Here is an example codepen
.card {
min-height: 300px;
width: 200px;
padding-left: 40px;
}
#card1 {
background-color: blue;
}
#card2 {
background-color: red;
}
#card3 {
background-color: green;
}
<div id="card1" class="card" />
<div id="card2" class="card" />
<div id="card3" class="card" />
You can use CSS to give your cards absolute positioning. For each card in the HTML, use inline CSS to assign a left position and a z-index position in the stack (e.g. 0 for bottom card, 1 for the card above it, etc.). Make sure you remove your list bullets if you see them.
.stack {
list-style-type: none;
}
.card {
position: absolute;
}
<ul class="stack">
<li class="card" style="left:25px;z-index:0;"><img src="https://picsum.photos/seed/1/150/200"></li>
<li class="card" style="left:50px;z-index:1;"><img src="https://picsum.photos/seed/2/150/200"></li>
<li class="card" style="left:75px;z-index:2;"><img src="https://picsum.photos/seed/3/150/200"></li>
</ul>