Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I need to make a responsive gallery with two rows and 5 thumbnails on each row. I think I did something wrong cause the first row works fine but then instead of a new row underneath, it goes down the right side.I can't even make the thumbnails smaller without it changing the entire look. Can you please help me make my gallery work? I will put an image of the way it looks now.
<!DOCTYPE html>
<html >
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box > img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.box:hover {
transform: scale(1.04);
}
.box .title {
background: #ddd;
padding: .5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="placeholder-image.png" alt="some alt text">
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</div>
</body>
</html>
Try this HTML code. You were missing a closing </div> after the 5th box.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
background: rgb(255, 255, 255);
padding: 20px;
}
.box>img {
width: 100%;
display: block;
background-color: cornflowerblue;
border-top-right-radius: 1rem;
border-top-left-radius: 1rem;
}
.box:hover {
transform: scale(1.04);
}
.box .title {
background: #ddd;
padding: 0.5rem 1rem;
text-align: center;
width: -webkit-fill-available;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
<div class="box">
<img src="https://sppagebuilder.com/addons/image/image1.jpg" alt="some alt text" />
<div class="title">
<span>Image Title</span>
</div>
</div>
</div>
</body>
</html>
Related
I started learning web programming and i want to test some features but there is a problem, when I bring the mouse on the above photos, the bottom ones change place like in the photo. The photos below are on the left in the first opening, while hovering on the top one, it shifts to the right.
Like this:
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
border: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
</body>
</html>
How can i fix it?
Updated answer
Add outline instant of border
The problem with your border hover css
From
.gallery-item:hover{
border: 3px solid #777;
cursor: pointer;
}
To
.gallery-item:hover{
border: 1px solid #777;
cursor: pointer;
}
*{
box-sizing: border-box;
}
#gallery{
width: 1200px;
margin: 20px auto;
}
.item-container{
width: 25%;
float: left;
padding: 10px;
}
.gallery-item{
outline: 1px solid #ccc;
transition: border 0.4s linear;
}
.gallery-item:hover{
outline: 3px solid #777;
cursor: pointer;
}
.gallery-item img{
width: 100%;
height: 200px;
object-fit: contain;
background-color: #DCDCDC;
}
.description{
text-align: center;
padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Art Gallery</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/1.jpg" target="_blank">
<img src="img/1.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/2.jpg" target="_blank">
<img src="img/2.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/3.jpg" target="_blank">
<img src="img/3.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/4.jpg" target="_blank">
<img src="img/4.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/5.jpg" target="_blank">
<img src="img/5.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
<div id="gallery">
<div class="item-container">
<div class="gallery-item">
<a href="img/6.jpg" target="_blank">
<img src="img/6.jpg" alt="" >
</a>
<div class="description">
description about image gallery item
</div>
</div>
</div>
</div>
5.30.20 EDIT: Works on stackoverflows code snippet viewer but not on chrome or any html hosting. Here's the hosted file:
https://unholytool.htmlpasta.com/
wondering what's going on.
Here's an image to show what I'm talking about
https://i.stack.imgur.com/ggQcF.png
So I'm new to CSS and I'm not finding a lot of luck on google.
I have a media query set up that works great for mobile, however I can't seem to get it to display correctly on different monitor sizes.
On very wide screens it works well and displays four columns and the left sidebar.
However as the screen shrinks it displays a wonky view of three images on one row and one image on the next row
This is my current display with the answer below
body {
font-family: 'Montserrat';
font-size: 18px;
}
.body {
margin-left: 5%;
margin-right: 5%;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
width: 400px height:90px max-width: 30%;
}
.hero {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
}
.leftsidebar {
display: none;
}
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.column {
margin-left: 1%;
margin-right: 1%;
}
#media screen and (min-width: 1050px) {
.row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.column {
flex: 1 1 auto;
}
.container {
display: grid;
}
.leftsidebar {
grid-column: 1;
display: inherit;
}
.products {
grid-column: 2;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Our Catalog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel='stylesheet'>
<style>
</style>
</head>
<body class="body">
<div>
<img class="logo" src="logoimg.jpeg">
</div>
<hr class="divider">
<div>
<picture>
<source media="(max-width: 799px)" class="hero" srcset="heroimg1.jpeg, heroimg2.jpeg">
<img class="hero" src="heroimg1.jpeg">
</picture>
</div>
<hr class="divider">
<div class="container">
<div class="leftsidebar">
<img src="img.jpeg" />
</div>
<div class="products">
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1>product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
<div class="column">
<img src="img.jpeg" />
<h1> product</h1>
<p>$100</p>
</div>
</div>
</div>
</div>
<hr class="divider">
<br>
<h3>Return Policy | Shipping Policy | Privacy Policy | About Us | Our Cause</h3>
<br>
<hr class="divider">
</body>
</html>
I've tried a lot of stuff, including using both flex-shrink and flex-grow properties on all elements,
messing with height and width attributes setting them between auto and a %.
and setting a % with the flex property
Any ideas? I'm trying to keep javascript to a minimum so CSS only.
I have configured your flexbox CSS and it should work as per your requirement. I have also added </div> for every <div class="column">
.row {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.column {
flex: 1 1 auto;
}
<div class="row">
<div class="column">
<img src="image.jpeg" />
<h1> text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1> text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1>text</h1>
<p>text</p>
</div>
<div class="column">
<img src="image.jpeg" />
<h1>text</h1>
<p>text</p>
</div>
I need to add centre text on multiple images of different sizes within their own tags in a container div.
This is how my HTML and CSS is setup
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</section>
All these images have a single text messages which should all be centred, appreciate your help.
Here is a snap example of desired output
Instead of <img>, put your image in a div container using css background-image:url('');. Then use display:flex; (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) on this div to position your text vertically and horizontally centered.
HTML
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="imageWithCenteredText sports">
<h3 class="text1" >Sports</h3>
</div>
</div>
</div>
...
</div>
</section>
CSS
.imageWithCenteredText {
display:flex;
justify-content: center;
align-items: center;
}
.sports {
background-image: url('img/block1Sports.jpg');
width: 500px; /* PICTURE WIDTH */
height: 500px; /* PICTURE HEIGHT */
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.gallery-item {
position: relative;
}
.gallery-item img {
width: 100%;
}
.gallery-item h3 {
position: absolute;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<section>
<div class="row ">
<div class="col ">
<div class="container gallery">
<div class="gallery-item">
<img class="sports" src="img/block1Sports.jpg">
<h3 class="text1" >Sports</h3>
</div>
<div class="gallery-item">
<img id="wellness" src="img/block2Wellness.jpg">
<h3 class="text1" >wellness</h3>
</div>
<div class="gallery-item">
<img id="expeditions" src="img/block3Expeditions.jpg">
<h3 class="text1" >expeditions</h3>
</div>
<div class="gallery-item">
<img id="games" src="img/block4Games.jpg">
<h3 class="text1" >games</h3>
</div>
<div class="gallery-item">
<img id="culture" src="img/block5Culture.jpg">
<h3 class="text1" >culture</h3>
</div>
<div class="gallery-item">
<img id="beauty" src="img/block6Beauty.jpg">
<h3 class="text1" >beauty</h3>
</div>
<div class="gallery-item">
<img id="travelling" src="img/block7Travelling.jpg">
<h3 class="text1" >travelling</h3>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Is possible to create layout as below in css (without flex)? Columns always must have 100% height.
Their content doesn't fill them from top to bottom, so I have this problem:
jsfiddle
.holder {
display: table;
width: 100%;
}
.holder > div {
display: table-cell;
}
<div class="holder" >
<div class="col-left" >
<div class="first" >
<h3>title</h3>
<p>text text text</p>
</div>
<div class="image-bottom" >
<img src="path/to/image" alt="Image" />
</div>
</div>
<div class="col-middle" >
<div class="image-top" >
<img src="path/to/image" alt="Image" />
</div>
<div class="second" >
<h3>title</h3>
<p>text text text</p>
</div>
<div class="image-bottom" >
<img src="path/to/image" alt="Image" />
</div>
</div>
<div class="col-right" >
<div class="image-top" >
<img src="path/to/image" alt="Image" />
</div>
<div class="third" >
<h3>title</h3>
<p>text text text</p>
</div>
</div>
</div>
Freewall plugin helps you to manage that effect.
See the main page.
I have a image gallery which is not straighting/fullfilling the full width in a row
html
<div class="col-md-6">
<figure class="gallery">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
<img src="images/blog_1.png" alt="img">
</figure>
</div>
css
.gallery{
display:table;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
display:table-cell is also not working . There is 6 images here
.gallery{
display:table;
white-space: nowrap;
}
.gallery img{
display: inline-block;
padding: 2px;
background: transparent;
}
<div class="col-md-6">
<figure class="gallery">
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
<img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>
From what I understood (since you have not mentioned the image size.)
.gallery{
}
.gallery > div{
padding:2px;
}
.gallery img{
background: transparent;
width:100%;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
<div class="col-xs-2">
<img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
</div>
</div>
</div>
Add Below css
.gallery{
display:table;
margin:0;
}
DEMO