Is there a better way to achieve centering a text caption on an image that is nested in a CSS Grid item (and can be "justify-items: start/end/etc")
I like how the example is rendering in Safari & Chrome but in Firefox the image is spilling out of the parent div. Any help would be greatly appreciated! Thank you :)
Safari / Chrome Example
Firefox Example (Image spilling out of parent div)
https://codepen.io/jcha4849/pen/ywgMde
<body>
<div class="container-main"><article id="post-number-1">
<div class="standard-container-1">
<div class="caption-1">CENTERED CAPTION 1</div>
<img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
</article>
<article id="post-number-2">
<div class="standard-container-1">
<div class="caption-1">CENTERED CAPTION 2</div>
<img src="https://images.unsplash.com/photo-1516472096803-187d3339b36f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"></div>
</article>
</div>
<!-- container-main -->
</body>
<style>
body {
padding: 0;
margin: 0;
}
.container-main {
width: 100%;
display: grid;
grid-template-columns: repeat(10, 9vw);
grid-auto-rows: 9vw;
margin: 0 0 0px 0;
padding: 0;
min-width: 0;
padding: 5vw 5vw 15vw 5vw;
min-width: 0;
background-color: teal;
}
.container-main article {
border: 3px solid black;
}
.container-main article .standard-container-1 {
position: relative;
max-height: 100%;
max-width: 100%;
}
.container-main article .standard-container-1 .caption-1 {
min-width: 80%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.container-main article .standard-container-1 .caption-1 a {
color: #0f0;
font-family: sans-serif;
}
.container-main article .standard-container-1 img {
display: block;
height: auto;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
.container-main article#post-number-1 {
display:grid;
align-items: start;
justify-items: start;
grid-column: 1 / 4;
grid-row: 1 / 4 ;
}
.container-main article#post-number-2 {
display:grid;
align-items: start;
justify-items: end;
grid-column: 8 / 11;
grid-row: 1 / 4 ;
}
</style>
Related
I'm trying to put text on top of two images that are side by side and together fill out the entire site. Here is the code:
HTML:
<div class="main">
<img src="city.jpg" class="city" alt="city">
<img src="couple.jpg" class="couple" alt="couple">
</div>
CSS:
.main {
display: flex;
justify-content: space-between;
width: 100%;
height: 152.5vh;
}
.city {
flex-basis: 50%;
height: 100%;
object-fit: cover;
display: block;
}
.couple {
flex-basis: 50%;
height: 100%;
object-fit: cover;
display: block;
}
Both of the images are side by side without any space in between. I want to add text to the middle of the side so sort of on top of both images. What could I try to do?
I have looked online to find a solution but nothing worked or was simply too hard to understand and to implement. Thank you in advance!
personally I wouldn't do that with flex but with grid
Simple grid 2rows, 2 cols.
text div take 2 cells of first row, and image on second row, each in 1 cell
body {
margin: 0;
padding: 0;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
max-width: 100%;
height: 152.5vh;
}
.text {
grid-area: 1 / 1 / 2 / 3;
align-self: center;
justify-self: center;
color: #222222;
}
.city {
grid-area: 2 / 1 / 3 / 2;
width: 100%;
height: 100%;
}
.couple {
grid-area: 2 / 2 / 3 / 3;
width: 100%;
height: 100%;
}
.city img,
.couple img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="main">
<div class="text">
1 title for 2 image
</div>
<div class="city">
<img src="https://picsum.photos/id/237/800/600" alt="city">
</div>
<div class="couple">
<img src="https://picsum.photos/id/85/800/600" alt="couple">
</div>
</div>
so to answer your latest comment "thats right. over the two images on the center"
we still can use grid for images, in add here I put the grid in position relative, and the text in absolute. You can play with top value.
body {
margin: 0;
padding: 0;
}
.main {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
max-width: 100%;
height: 152.5vh;
position: relative;
}
.text {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
color: #222222;
}
.city {
grid-area: 1 / 1 / 2 / 2;
width: 100%;
height: 100%;
}
.couple {
grid-area: 1 / 2 / 2 / 3;
width: 100%;
height: 100%;
}
.city img,
.couple img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="main">
<div class="text">
1 title for 2 image
</div>
<div class="city">
<img src="https://picsum.photos/id/237/800/600" alt="city">
</div>
<div class="couple">
<img src="https://picsum.photos/id/85/800/600" alt="couple">
</div>
</div>
In the following snippet I have a position: fixed div which is not part of the grid layout and I have a row-1 and main grid rows.
I would like the main to expand to the available space which I thought grid-template-rows: 6rem 1fr would do but it is not.
I'd also like there to be less of gap between the rows but grid-row-gap is not working in this example.
html {
scroll-behavior: smooth;
height: 100%;
}
body {
text-rendering: optimizeSpeed;
height: 100%;
}
#root {
height: 100%;
}
.container {
border: 10px solid green;
background: #f1f1f1;
display: grid;
align-items: center;
grid-template-areas:
"row-1"
"main";
grid-template-rows: 6rem 1fr;
grid-row-gap: 0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.row-1 {
border: 10px solid blue;
grid-area: row-1;
}
.main {
border: 10px solid orange;
grid-area: main;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
</body>
</html>
You could do it as below, and if you want .row-1 not covered by the fixed element, you could add for example padding-top:3rem to .container or to .row-1 itself.
body {
text-rendering: optimizeSpeed;
margin:0;
}
.fixed {
position: fixed;
width: 100%;
left: 0;
right: 0;
top: 0;
z-index: 10;
background: yellow;
height: 3rem;
}
.container {
min-height: 100vh;
border: 10px solid green;
display: grid;
grid-template-rows: 6rem 1fr;
}
.row-1 {
border: 10px solid blue;
}
.main {
border: 10px solid orange;
}
<main id="root">
<div class="fixed">Fixed</div>
<div class="container">
<div class="row-1">Row 1</div>
<div class="main">main</div>
</div>
</main>
I can't align a div container at the bottom of an image.
What I've tried is editing the attribute position of the image and set it's value to "relative".
Explaining this is a little bit difficult, but I got html and css code snippets with a little preview:
codepen.io/Proudyy/pen/PoOjYpK
(it's not 84 lines long, so not too much in my opinion)
This is how it should look like:
https://imgur.com/a/LShx2cM
set position: absolute for .skin-item-footer and position: relative on it's parent div. Check below code
.skin-item-splashart {
width: 100%;
border-radius: 12px;
position: relative;
}
.skin-item-footer-left-container {
grid-column: 1;
display: grid;
grid-template-rows: repeat(2, auto);
align-self: start;
height: 100%;
}
.skin-item-footer-right-container {
grid-column: 2;
display: grid;
align-items: center;
justify-content: end;
align-self: end;
height: 100%;
}
.skin-item-default-name {
font-size: 24px;
font-weight: bold;
margin-left: 3vh;
}
.skin-item-name {
font-size: 18px;
color: gainsboro;
margin: 0;
margin-left: 3vh;
grid-row: 1;
}
.skin-item-cost {
display: grid;
grid-row: 2;
grid-template-columns: repeat(2, auto);
grid-template-rows: 1fr;
}
.skin-item-cost-value {
color: gainsboro;
grid-column: 1;
margin: 0;
}
.skin-item-cost-icon {
grid-column: 2;
margin: 0;
}
.skin-item-save-icon {
cursor: pointer;
margin-right: 2vh;
}
.skin-item {
background-color: rgb(0, 40, 75);
margin: 15px;
border-radius: 12px;
height: auto;
width: 50%;
position: relative;
}
img{
max-width: 100%;
}
.skin-item-footer {
background-color: rgba(0, 0, 0, 0.4);
border-radius: 0 0 12px 12px;
position: absolute;
bottom: 0;
height: auto;
width: 100%;
}
<div class="skin-item">
<img class="skin-item-splashart" src="https://cdn.communitydragon.org/latest/champion/1/splash-art/skin/1"/>
<div class="skin-item-footer">
<div class="skin-item-footer-left-container">
<p class="skin-item-name">SkinName</p>
<div class="skin-item-cost">
<img class="skin-item-cost-icon" src="https://raw.communitydragon.org/latest/plugins/rcp-fe-lol-static-assets/global/default/images/icon-rp-24.png"/>
<p class="skin-item-cost-value">Spaceholder</p>
</div>
</div>
<div class="skin-item-footer-right-container">
<img class="skin-item-save-icon" src="https://img.icons8.com/color/32/000000/save--v1.png"/>
</div>
</div>
</div>
When I resize (shrink) the browser, the header elements will move onto the white space. I want them to stay within the blue background color regardless of resizing the browser.
body,
html {
height: 100vh;
}
body {
margin: 0;
display: grid;
grid-template-columns: 15%;
grid-template-rows: auto;
}
aside {
grid-row: 1 / 5;
background-color: blue;
}
.sidebar {
display: flex;
flex-direction: column;
text-align: center;
position: fixed;
margin-left: 0.5rem;
}
<aside>
<div class="sidebar">
<h3>Home</h3>
<h3>About</h3>
<h3>Recent Projects</h3>
</div>
</aside>
I edited your CSS, and I clarified the dimensions. Hopefully this works :)
body,
html {
height: 100vh;
}
body {
margin: 0;
display: grid;
grid-template-columns: 15%;
grid-template-rows: auto;
}
aside {
grid-row: 1 / 5;
background-color: blue;
width: 150px;
}
.sidebar {
display: flex;
flex-direction: column;
text-align: center;
position: fixed;
margin-left: 0.5rem;
}
.sidebar h3 {
width: 130px;
}
Don't use % as a value. Otherwise, it scales to that percentage.
ie; grid-template-columns: 15%; means 15% of the available window size.
You are best setting static widths as opposed to percentage widths.
You can have a width set on your aside CSS to override the percentage, example;
aside {
grid-row: 1 / 5;
background-color: blue;
width: 160px;
}
Use minmax() and remove the position:fixed
body,
html {
height: 100vh;
}
body {
margin: 0;
display: grid;
grid-template-columns: minmax(max-content,15%);
grid-template-rows: auto;
}
aside {
grid-row: 1 / 5;
background-color: blue;
}
.sidebar {
display: flex;
flex-direction: column;
text-align: center;
margin-left: 0.5rem;
}
<aside>
<div class="sidebar">
<h3>Home</h3>
<h3>About</h3>
<h3>Recent Projects</h3>
</div>
</aside>
I have a list which I can add items to. However, after the list gets to a certain size (5 in my case), the items in the list creep UP the page, rather than the desired (and normal) behaviour of extending down the page and allowing scrolling. I have a feeling this is to do with using CSS grid-templates as I'm a complete newbie to it... I've searched high and low and yet to find any hints!
My code is as follows:
Why are the items in this list creeping up my page once a certain number of items is hit?
body {
margin: 0;
padding: 0;
background: #2e112d;
}
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 60px repeat(10, 10%);
height: 100vh;
}
.nav-bar {
grid-column: 1 / 6;
grid-row: 1 / 2;
background: #ffdbc5;
text-align: center;
}
.brand {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
display: inline-block;
padding: 1.5%;
}
.background-image {
grid-row: 2 / 9;
grid-column: 1 / -1;
overflow: hidden;
position: relative;
}
img {
position: absolute;
display: block;
height: 100%;
width: auto;
margin: 0 auto;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
.workouts {
grid-column: 2 / 5;
grid-row: 2 / -1;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
.new-workout {
font-size: 200%;
color: white;
background: none;
border: white 10px;
display: inline-block;
height: 30%;
width: 30%;
grid-row: 1;
margin: auto;
z-index: 1;
}
.workout-list {
display: block;
position: relative;
align-self: start;
grid-column: 1 / 2;
grid-row: 3;
z-index:1;
}
button.btn {
color: #5a5a5a;
background-color: #e8e8e8;
margin: 10px 0 10px 0;
width: 100%
}
span.delete {
display: inline-block;
float: right;
color: red;
}
<div id="app">
<div data-reactroot="" class="container">
<div class="nav-bar"></div>
<div class="brand">Fiery Leaf</div>
<div class="background-image">
<img src="/static/media/landscape-banner.67e9e794.jpg">
</div>
<div class="workouts">
<button class="new-workout">New Workout</button>
<div class="workout-list">
<div class="workout">
<button type="button" class="btn btn-default" />
</div>
<div class="workout">
<button type="button" class="btn btn-default" />
</div>
</div>
</div>
</div>
</div>
original
original + 1
It looks that your HTML code is broken:
one button (the second one) not closed, and an extra div ending, messing up the layout of page flow.
Here is the jsbin with correct code.
My suggestion: always validate your code.
Try adding vertical-align: top; to the div that you're extending.
Here's a little example - if you change vertical-align to bottom it will work like you described in your case, I hope that helps:
.container {
width: 100px;
background-color: red;
display: inline-block;
margin: 0;
vertical-align: top;
}
p {
width: 90px;
display: block;
margin: 5px 0;
}
.other {
margin: 0;
background-color: blue;
width: 40px;
height: 50px;
display: inline-block;
}
<div class="container">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div><div class="other"></div>