CSS Grid with h1 Title - html

This may seem like a really daft question, but I would really appreciate any help.
I'm trying to create a Gallery using CSS Grid and I would like to add a h1 tag to title the page but the Grid is taking the h1 element as another image.
This is the HTML code for the Gallery
<section class="gallery">
<div class="gallery-text"><h1>Gallery</h1></div>
<figure class="gallery_item">
<img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Skies Above!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Beautiful Seaviews!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Nature
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
By the Seaside
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Cities
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Something Different
</figcaption>
</figure>
</section>
CSS code
section{
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-template-rows: auto;
}
section h1{
text-align: center;
}
.gallery_item{
box-sizing: border-box;
margin: auto;
width: 100%;
padding: 1rem;
box-shadow: 1px 2px 40px 2px rgba(160,160,160, .5);
}
.gallery-image{
width: 100%;
display: block;
}
.gallery{
width: 100%;
grid-column: 1 / -1;
display: grid;
grid-gap: 12px;
grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
grid-template-rows: auto;
margin: auto;
}
.gallery_item img{
height: 250px;
}
I'm just not sure how to target the h1 element.

Well, you've put the h1 in the grid container, so it is subject to the same grid properties as the images. If you want the heading to perform the function of a standard page heading, then remove it from the grid container.
jsFiddle demo
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 10px;
margin: auto;
}
h1 {
text-align: center;
}
.gallery_item {
box-sizing: border-box;
margin: auto;
width: 100%;
padding: 1rem;
box-shadow: 1px 2px 40px 2px rgba(160, 160, 160, .5);
}
.gallery-image {
width: 100%;
display: block;
}
.gallery_item img {
height: 250px;
}
<h1>Gallery</h1>
<section class="gallery">
<figure class="gallery_item">
<img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Skies Above!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Beautiful Seaviews!
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Nature
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
By the Seaside
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Cities
</figcaption>
</figure>
<figure class="gallery_item">
<img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image">
<figcaption class="gallery_image-caption">
Something Different
</figcaption>
</figure>
</section>

Related

How can I reduce space between images when using <figure>?

How can I adjust the space between images when using <figure>? I want to reduce the space, but for some reason I just can't get it it to budge.
I want 3 images to sit on one row, but because I can't reduce the space between images to allow them to fit comfortably in the div box, the 3rd is wrapping and sitting below the first two
.container3 {
width: 1000px;
height: 600px;
box-sizing: border-box;
}
.container3 figure {
display: inline-block;
box-sizing: border-box;
}
<div class="container3">
<figure>
<img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
<figcaption>
Fall Berry Blitz Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
<figcaption>
Spiced Rum Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
<figcaption>
Seasonal Donuts
</figcaption>
</figure>
</div>
Figure has a margin of 16px applied. You can adjust the margin, if it is that, what you want:
.container3 {
width: 1000px;
height: 600px;
box-sizing: border-box;
border: 1px dashed black;
}
.container3 figure {
display: inline-block;
box-sizing: border-box;
margin: 0;
}
<div class="container3">
<figure>
<img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
<figcaption>
Fall Berry Blitz Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
<figcaption>
Spiced Rum Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
<figcaption>
Seasonal Donuts
</figcaption>
</figure>
</div>
If you want to distribute the available space evenly between the images, you can use flexbox and use justify-content: space-between:
.container3 {
display: flex;
justify-content: space-between;
width: 1000px;
height: 600px;
box-sizing: border-box;
border: 1px dashed black;
}
.container3 figure {
display: inline-block;
box-sizing: border-box;
margin: 0;
}
<div class="container3">
<figure>
<img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
<figcaption>
Fall Berry Blitz Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
<figcaption>
Spiced Rum Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
<figcaption>
Seasonal Donuts
</figcaption>
</figure>
</div>
I've added another snippet based on OP's comment:
.container {
background: tomato;
display: flex;
gap: 10px;
justify-content: center;
flex-flow: column nowrap;
width: 600px;
height: 300px;
box-sizing: border-box;
border: 1px dashed black;
}
.row {
display: flex;
justify-content: center;
gap: 10px;
}
.row figure {
background: #DEDEDE;
/* or width */
flex-basis: calc(100% * 1/3);
/* you may use max-width: 100px; to limit the size */
flex-shrink: 1;
flex-grow: 0;
box-sizing: border-box;
height: 50px;
margin: 0;
}
<div class="container">
<div class="row row-3">
<figure>Fig. 1</figure>
<figure>Fig. 2</figure>
<figure>Fig. 3</figure>
</div>
<div class="row row-2">
<figure>Fig. 4</figure>
<figure>Fig. 5</figure>
</div>
<div class="row row-1">
<figure>Fig. 6</figure>
</div>
</div>
inline-block elements have the "funny" way of including the whitespace after the tag. You have 2 possibilities to remove the whitespace:
As #Breezer suggested add display: flex; to the parent-container.
remove the whitespace in html after each figure like so:
<figure>
<img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
<figcaption>
Fall Berry Blitz Tea
</figcaption>
</figure><figure>
<img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
<figcaption>
Spiced Rum Tea
</figcaption>
</figure><figure>
<img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
<figcaption>
Seasonal Donuts
</figcaption>
</figure>
Using display: flex on the container should be enough.
Also, the <img> tag expects unitless width and height attributes (without "px"):
.container3 {
width: 1000px;
height: 600px;
display: flex;
justify-content: space-between;
}
.container3 figure {
margin: 0;
}
<div class="container3">
<figure>
<img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="berry blitz">
<figcaption>
Fall Berry Blitz Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="spiced rum">
<figcaption>
Spiced Rum Tea
</figcaption>
</figure>
<figure>
<img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="donut">
<figcaption>
Seasonal Donuts
</figcaption>
</figure>
</div>

jpg images display trouble

I have a very simple HTML / CSS image grid. All photos are different and are inside a <figure> tag. When the images are in jpg file format, when refreshing the page sometimes some of them are repeated or appear distorted, with another ghost image on top or dissappear. This only happens with jpg, not png. Why is this? Is there a solution?
ul { padding: 0; margin: 0; }
figure { margin: 0; }
.grid-item {
float: left;
width: 33%;
}
.tm-img {
max-width: 320px;
width: 100%;
height: auto;
border: none;
margin: 0 auto;
}
.grid-item figure {
position: relative;
overflow: hidden;
text-align: center;
}
.grid-item figure img {
display: block;
max-width: 100%;
}
<ul>
<li>
<div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/01.jpg" alt="Image 01" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/02.jpg" alt="Image 02" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/03.jpg" alt="Image 03" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/04.jpg" alt="Image 04" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/05.jpg" alt="Image 05" class="tm-img">
</figure>
</div>
<div class="grid-item">
<figure>
<img src="https://stupefied-fermi-29b354.netlify.app/img/06.jpg" alt="Image 06" class="tm-img">
</figure>
</div>
</div>
</li>
</ul>
Image repeated
Image disappeared
This is the sample netlify html page
Animation
Refreshing the page multiple times shows the issue.

How to make a figcaption not move the image?

I am looking to put a figcaption onto an image and not have it move the image from its original spot without the figcaption`. Here is my CSS for figcaption.
Here is my code for an image with a figcaption.
figcaption {
text-align: center;
display: inline-block;
}
<figure>
<a href="https://ibb.co/CbSzPRr">
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</a>
<br>
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
Here is also a screenshot of what it looks like. The image on the left is where the image should be. The image on the left has a figcaption and it's slightly up to the left.
I am very new to coding. Anything suggestions would help. Thank you! I think there is a really simple solution to this that I'm missing.
Are you looking for something like this -
figure {
display: block;
float: left;
width: 200px;
margin: 20px
}
figcaption {
display: block;
text-align: center;
width: 100%;
}
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>The image stays in same row without begin displaced</div>
</figcaption>
</figure>
The above code will display all images in single row and all the captions beneath them. The images won't be misaligned in a single row.
Another way of doing it would be to bring the captions over the image. This can be done as -
.row {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-X: scroll;
}
figure {
display: block;
float: left;
position: relative;
margin: 30px 15px
}
figcaption {
position: absolute;
bottom: 0;
background: #fff;
opacity: .7;
width: 100%;
text-align: center;
}
.row-separator {
height: 5px;
background-color: grey;
margin: 20px 10px;
}
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
<div class="row-separator"></div>
<div class="row">
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>Retouched, Untagged</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
<figure>
<img src="https://i.ibb.co/CbSzPRr/Published-06-Retouced-Untagged.jpg" alt="Published-06-Retouced-Untagged" border="0">
<figcaption>
<div>caption on image</div>
</figcaption>
</figure>
</div>
Hope this helps !

How to align multiple images with captions?

I am trying to align 4 images horizontally each with its own caption, and then other 4 images under exactly the same.
I am new to code, so I only use HTML and CSS.
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills > img {
display: flex;
width: 100%;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>
For some reason, the first image in the row is not aligned with the other 3. And on mobile (where they are displayed in 2 columns) the first column has the same problem.
Thank you very much for your time!
Reset the default top margin on the figure.
figure {
margin-top: 0;
}
.skill-bg {
padding-bottom: 50px;
padding-top: 50px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
}
.skills {
column-count: 4;
column-gap: 0;
page-break-inside: avoid;
break-inside: avoid-column;
font-family: 'Poppins', sans-serif;
justify-content: space-between;
}
.skills>img {
display: flex;
width: 100%;
}
figure {
margin-top: 0;
}
#media (max-width: 768px) {
.skills {
column-count: 2
}
}
<section class="skill-bg">
<h2 align="center" class="column-title2">Hard Skills</h2>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="copywriting logo" width="100">
<figcaption>Copywriting</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="graphic design logo" width="100">
<figcaption>Graphic Design</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user research logo" width="100">
<figcaption>User Research</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="user testing logo" width="100">
<figcaption>User Testing</figcaption>
</figure>
</div>
<div class="skills">
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="html logo" width="100">
<figcaption>HTML</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="css logo" width="100">
<figcaption>CSS</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="prototyping logo" width="100">
<figcaption>Prototyping</figcaption>
</figure>
<figure>
<img src="https://dummyimage.com/300x300/110/100" alt="photography logo" width="100">
<figcaption>Photography</figcaption>
</figure>
</div>
</section>

How to stack two images and center in the middle

I want the images to be centered and I need two of the images to be stacked up on each other in the center. I have logo on the left and nav bar on the right
.projImg {
margin: 0;
}
.projImg img {
display: block;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>
.projImg {
margin: 0;
}
.projImg img {
display: block;
margin: auto;
}
use this CSS code to centralize your images.
Use following code...
.projImg {
text-align:center;
width: 50%;
float:left;
margin:0;
}
.projImg img {
display: inline-block;
width: 100%;
}
<div class="mainProj">
<main>
<figure class="projImg">
<img src="https://i.imgur.com/UiAiZYm.jpg" alt="projectImage1">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/4F4Agjz.jpg" alt="projectImage2">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/GncQ8QI.jpg" alt="projectImage3">
</figure>
<figure class="projImg">
<img src="https://i.imgur.com/MGkSJza.jpg" alt="projectImage4">
</figure>
</main>
</div>