I'm trying to create a responsive grid with text and an icon on top of a picture in each grid cell. However, I can't seem to get the text to stack on top of the image.
Here is my current code:
https://codepen.io/FrazierChristie/pen/WgdEEx
<div id="igGrid">
<div class="ig1">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/3_1024x1024.jpg?v=1526628915" >
<div class="igText"> TEXT HERE </div>
</div>
<div class="ig2">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey9_1024x1024.jpg?v=1526628964" >
</div>
<div class="ig3">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/12345_1024x1024.jpg?v=1526629035" >
</div>
<div class="ig4">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/td1_1024x1024.jpg?v=1526628975" >
</div>
<div class="ig5">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey6_1024x1024.jpg?v=1526629015" >
</div>
<div class="ig6">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/BlueLS3_1024x1024.jpg?v=1535724601" >
</div>
<div class="ig7">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/Leaf1_1024x1024.jpg?v=1526629035" >
</div>
<div class="ig8">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey8_1024x1024.jpg?v=1526628964" >
</div>
<div class="ig9">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/td4_1024x1024.jpg?v=152662897" >
</div>
<div class="ig10">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/grey4_1024x1024.jpg?v=1526628964" >
</div>
<div class="ig11">
<img class="igImage" src="https://cdn.shopify.com/s/files/1/1535/9821/products/4a_1024x1024.jpg?v=1526628915">
</div>
</div>
and
#igGrid{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
max-width: 960px;
margin: 0 auto;
text-align: center;
color: #fff;
}
#igGrid div{
background: #fff;
padding: 0px;
}
.ig1{
grid-column: 1/2;
}
.ig2{
grid-column: 2/3;
}
.ig3{
grid-column:3/5;
grid-row: 1/3;
}
.ig4{
grid-column: 1/3;
grid-row: 2/4;
}
.ig9{
grid-column: 3/5;
grid-row: 4/6;
}
.igImage{
width:100%;
height: 100%;
}
.igText{
position: absolute;
top:50%;
left: 50%;
tranfrom: translate(-50%,-50%);
}
Can anyone help at all?
Sorry about my formatting, I'm really new to all of this and just playing around really.
Thanks!
here try this.. Instead of calling the image out in your html, call it out on your css. all the grid is already formatted, you just need to enter the background:url() for every div class you created so for example...
HTML
<div class="ig1">
<h2> Text Here </h2>
</div>
CSS
.ig1 {
background:url('https://cdn.shopify.com/s/files/1/1535/9821/products/3_1024x1024.jpg?
v=1526628915');
background-repeat: no-repeat;
background-size:contain;
}
this way the img will be the background. so anything infront of the background will appear. I hope this helps!
try adding this to your css.
* {
box-sizing: border-box;
}
and I just thought of a different way of doing this. you could try..
entering the img to be 100% of its container by typing this. and also add a z-index so that you can layer anything on top of it, so like your text.
img {
width: 100%;
z-index -1;
}
Related
I need the grid ad big as the page (it should touch the top the bottom and both sides) and I'd like it to be non-scrollable.
HTML:
<div class="wrapper">
<div class="prova">One</div>
<div class="prova"> </div>
<div class="prova">Three</div>
<div class="prova">Four</div>
<div class="prova"> five </div>
<div class="prova">Six</div>
<div class="prova">Seven</div>
<div class="prova">Eight</div>
<div class="prova">Nine</div>
<div class="prova">Ten</div>
<div class="prova">Eleven</div>
<div class="prova">Twelve</div>
</div>
CSS:
.wrapper {
padding-top: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.prova{
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
I've read multiple questions but I couldn't find any solution that works fine for me.
As you can see in the picture above the grid doesn't touch neither the top or the bottom!
Set gird-auto-rows to use a percentage of the viewport height. Equal amounts per expected row. So in your case 25vh. Then remove any padding or margin around the grid.
html, body {
margin: 0
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
}
.prova{
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
<div class="wrapper">
<div class="prova">One</div>
<div class="prova"> </div>
<div class="prova">Three</div>
<div class="prova">Four</div>
<div class="prova"> five </div>
<div class="prova">Six</div>
<div class="prova">Seven</div>
<div class="prova">Eight</div>
<div class="prova">Nine</div>
<div class="prova">Ten</div>
<div class="prova">Eleven</div>
<div class="prova">Twelve</div>
</div>
If you want it to touches the top just remove the padding
And for other sides just set the width and height of the wrapper to 100vh and 100vw
I want to design a hero section similar to BBC website. I started working on this using CSS Grid which I thought could get the same design with minimal code.
I have managed to base design but I want item1 to take 50% of the container's width and rest of the items to take 25% of space each so that it looks like the image above. I can span rows but I am not sure how I can span columns correctly, I tried this :
.item1 {
grid-column-end: span 2;
}
But it broke the design and same did happen with:
.item1 {
grid-column: auto / span 2;
}
My code:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 0px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 0px 0;
font-size: 30px;
}
.item1 {
grid-row-end: span 2;
}
.grid-container div img {width:100%; max-width:600px;}
<div class="grid-container">
<div class="item1">
<img src="https://dummyimage.com/600x400/f09c00/fafafa&text=1"/>
</div>
<div class="item2">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=2"/>
</div>
<div class="item3">
<img src="https://dummyimage.com/600x400/5310f0/fafafa&text=3"/>
</div>
<div class="item4">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=4"/>
</div>
<div class="item5">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=5"/>
</div>
</div>
You could do it as below. I simplified the code by removing irrelevant code for the desired layout and added comments.
.grid-container {
background-color: #2196f3;
/* with these 3 lines below, I'm creating a grid of 4 columns and 2 rows*/
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
grid-gap: 10px;
}
.grid-container > div:nth-of-type(1){ /* I grab the first div */
grid-column: 1 / 3; /* I tell him to take 2 columns, 1 -> 3 with 3 excluded */
grid-row: 1 / 3; /* I tell him to take 2 rows, 1 -> 3 with 3 excluded */
}
.grid-container div img {
width: 100%;
height:100%;
object-fit:cover;
}
<div class="grid-container">
<div class="item1">
<img src="https://dummyimage.com/600x400/f09c00/fafafa&text=1" />
</div>
<div class="item2">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=2" />
</div>
<div class="item3">
<img src="https://dummyimage.com/600x400/5310f0/fafafa&text=3" />
</div>
<div class="item4">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=4" />
</div>
<div class="item5">
<img src="https://dummyimage.com/600x400/0010f0/fafafa&text=5" />
</div>
</div>
I'm trying to create the layout below using CSS Grid. However, my image and paragraph is not being positioned correctly.
When running my HTML and CSS:
There is some white space at the top of my image and
My paragraph is positioned at the very bottom
I believe the problem is with my image. Images have to maintain aspect ratio and its affecting my grid in unexpected ways.
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
h1, h2, p {
grid-column: 1;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<h2>Subtitle</h2>
<h1>Title</h1>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
<p>Just some paragraph text...</p>
</div>
Looks like you are trying to do multiple things at once. That won't work.
At first, wrap around your first column into another element. So the last thing is only to figure out positioning inside the first column.
.grid {
display: grid;
}
.first-column {
grid-column: 1;
}
.first-column-content {
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}
img {
grid-column: 2;
width: 100%;
}
<div class="grid">
<div class="first-column">
<div class="first-column-content">
<div class="header">
<h2>Subtitle</h2>
<h1>Title</h1>
</div>
<div class="footer">
<p>Just some paragraph text...</p>
</div>
</div>
</div>
<img src="https://images.unsplash.com/photo-1593986338340-6f7361d756da?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=881&q=80">
</div>
Currently, this is what it looks like: https://jsfiddle.net/r8zgokeb/1/
However, I am trying to place another small image underneath the text as well, but i want it to start right underneath the text. Therefore, the image underneath the text should not go past the bottom of the left image.
HTML:
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
</div>
CSS:
.image-txt-container {
display:flex;
align-items:center;
flex-direction: row;
}
Here is a simple code (not flex, but float of first img):
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>Text here</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
And CSS:
.image-txt-container {
width: 100%;
}
.image-txt-container img:first-child {
float: left;
padding-right: 40px;
width: 450px;
}
.image-txt-container img:last-child{
max-width: 50px;
}
Hi think this is onw of the way to do
HTML
<div class="image-txt-container">
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
<h2>
Text here
</h2>
<img src="https://images4.alphacoders.com/206/thumb-350-20658.jpg">
</div>
CSS
.image-txt-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-auto-flow: row;
}
.image-txt-container img:nth-child(3) {
grid-column-start: 2;
}
I'm trying to make a grid with items/pizza toppings to order, and I would like an "Add to cart" button under each item in the grid. How would I go about doing that?
So far I've tried simply putting a button with a line break under an element but as assumed, that didn't work.
Here is the relevant code I have in the body:
.wrapper {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-row-gap: 30px;
grid-column-gap: 10px;
}
.item {
background: firebrick;
color: white;
padding: 10px;
}
.item:nth-child(even) {
background: rgb(139, 19, 19);
}
.add {
margin-bottom: 100px;
}
button {
margin-bottom: 100px;
}
#container {
background-color: maroon;
width: 1500px;
height: 1200px;
margin-left: auto;
margin-right: auto;
border-color: black;
border-width: 10px;
border-style: double;
}
<div id="container">
<div id="header">
<h1> Pizza Planet </h1>
<script src="index.js"></script>
</div>
<div id="content">
<h2>Select your items:</h2>
<div class="wrapper">
<div class="item">1</div>
<div class="add"><button>Add To Cart</button></div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</div>
All that does is make a huge gap for another cell on the grid with a tiny add to cart button on there. Any help would be appreciated, thank you.
One approach might be to use CSS grid to achieve what you require. A simple grid layout for what you describe above could be done like this:
.item img {
width:100%;
/* Causes the button to sit below the img */
display:block;
}
.item button {
width:100%;
}
.grid {
/* Specifies css grid to be used */
display:grid;
/* Specifies the number of columns and sizes in the grid */
grid-template-columns: 1fr 1fr;
/* Specifies spacing between grid cells */
grid-gap:1rem;
}
<div class="grid">
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
</div>