Blockquote Hello, I'm trying to make a responsive img grid with the following : 2 imgs at the top, sharing 50% of the space, and 4 imgs underneath with the same aspect ratio.
The grid works just fine, until I've decided to add a small caption. What am I doing wrong ?
Thank you, have a nice one,
Kieran.
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left;
width: 100%;
}
.grid-container1 h3 {
font-size: 1rem;
padding: 5px;
float: bottom;
}
.grid-container1 {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 50%;
padding: 5px;
}
.grid-container2 img {
vertical-align: top;
width: 25%;
float: left;
padding: 5px;
}
.grid-container3 img {
vertical-align: top;
width: 33.33%;
float: left;
padding: 5px;
}
<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container1">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
<div class="grid-container2">
<a href="#">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
</a>
<h3>lorem ipsum</h3>
</div>
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.grid-container {
display: grid;
border: 1px solid red;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr, 1fr;
padding: 5px;
gap: 5px;
}
.grid-container figure {
margin: 0;
}
.grid-container figure:nth-child(1) {
grid-column: 1 / 3;
}
.grid-container figure:nth-child(2) {
grid-column: 3 / 5;
}
.grid-container img {
display: block;
width: 100%;
height: auto;
}
<div class="grid-container">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>
Try this:
body {
padding: 0px;
font-family: sans-serif;
background: #f2f2f2;
height: 100%;
}
.first-row {
border: 3px solid green;
float:left;
width: 100%;
}
.grid-container1, .grid-container2 {
display: flex;
}
.grid-container1 figcaption {
font-size: 1rem;
padding: 5px;
float: bottom;
}
.grid-container1 {
border: 1px solid red;
}
.grid-container1 img {
display:inline-block;
vertical-align:middle;
width: 100%;
}
.grid-container2 img {
vertical-align: top;
width: 100%;
float: left;
}
<div class="grid-container1">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>
<div class="grid-container2">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
<figcaption>lorem ipsum</figcaption>
</figure>
</div>
Related
I tried used display: inline-block and other stuff like changing the width but my images only show to be vertical.
.figure {
display: inline-block;
}
figure.item {
color: #676767;
background-color: #ffffff;
width: 100%;
margin: 0;
text-align: center;
display: inline-block;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: block;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
Right now the images are showing vertically and with text under. And i need the images to be horizontally with text under they.
Using Flex-box
I make a wrap div for every img and text.
.item {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin: 0;
}
.item img {
width: 100px;
height: 100px;
display: inline-block;
}
.caption {
display: inline-block;
}
.wrap{
width:100px;
text-align: center;
}
<figure class="item">
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
<div class="wrap">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</div>
</figure>
figure.item {
color: #676767;
background-color: #ffffff;
text-align: center;
}
.item img {
width: 100px;
height: 100px;
}
figure {
width: 25%;
float: left;
margin: 0;
text-align: center;
padding: 0;
}
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure class="item">
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
There are several issues with your snippet:
The first line .figure is not meant to be a class but a element selector (i.e. .figure !== figure)
Block-Elements will be displayed underneath each other by default.
Try to use flex-box. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.row {
display: flex;
}
<div class="row">
<figure>
<img src="./img/facebook.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/insta.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/telefone.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
<figure>
<img src="./img/email.png" />
<figcaption class="caption">Facebook</figcaption>
</figure>
</div>
【 ALL RESOLVED 】(comment reference)
Problem
I want to centrally align figcaption below to.meter.
But the frame of the parent element gets in the way and will not work out a bit.
e.g. Vectorworks (Because the characters are longer than .meter)
And what matters is that I want to vary based on .meter. (That's it already)
Is there any good way to do it?
Complete image
▼ Decomposition of effect
▼ The current situation is as per the code snippet.
code
html { font-size: 62.5%; }
.data {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.skill li {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.skill li :last-child {
margin-right: 0;
}
.code {
margin-top: 1.7rem;
}
figure {
margin-right: .9rem;
margin-bottom: 2.1rem;
font-size: 1rem;
position: relative;
height: 4.4rem;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
figure > figcaption {
position: absolute;
line-height: 1;
text-align: center;
bottom: -1.5rem;
left: 0;
right: 0;
margin: 0 auto;
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.PHP > .meter-t {
width: 2.4rem;
}
<section class="skill">
<p class="title">skill</p>
<ul class="data">
<li class="tool">
<figure class="Illustrator">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
<figcaption>Illustrator</figcaption>
</figure>
<figure class="Photoshop">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
<figcaption>Photoshop</figcaption>
</figure>
<figure class="Indesign">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
<figcaption>Indesign</figcaption>
</figure>
<figure class="Vectorworks">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
<figcaption>Vectorworks</figcaption>
</figure>
<figure class="Shade">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
<figcaption>Shade</figcaption>
</figure>
</li>
<li class="code">
<figure class="HTML">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
<figcaption>HTML</figcaption>
</figure>
<figure class="CSS">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
<figcaption>CSS</figcaption>
</figure>
<figure class="Javascript">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
<figcaption>Javascript</figcaption>
</figure>
<figure class="PHP">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
<figcaption>PHP</figcaption>
</figure>
</li>
</ul>
</section>
What i did here is made figure > .meter absolute and figure > figcaption as relative. By doing so i can add text-align: center to the parent div and fix your centering of text issue. Now no matter how long the text is it will always be in the center the way you wanted it to be.
html { font-size: 62.5%; }
.data {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.skill li {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.skill li :last-child {
margin-right: 0;
}
.code {
margin-top: 1.7rem;
}
figure {
margin-right: .9rem;
margin-bottom: 2.1rem;
font-size: 1rem;
position: relative;
height: 4.4rem;
text-align: center;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
/* position: relative; */
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
figure > figcaption {
position: relative;
line-height: 1;
text-align: center;
bottom: -5.5rem;
/* left: 0;
right: 0;
margin: 0 auto; */
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.PHP > .meter-t {
width: 2.4rem;
}
<section class="skill">
<p class="title">skill</p>
<ul class="data">
<li class="tool">
<figure class="Illustrator">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
<figcaption>Illustrator</figcaption>
</figure>
<figure class="Photoshop">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
<figcaption>Photoshop</figcaption>
</figure>
<figure class="Indesign">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
<figcaption>Indesign</figcaption>
</figure>
<figure class="Vectorworks">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
<figcaption>Vectorworks</figcaption>
</figure>
<figure class="Shade">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
<figcaption>Shade</figcaption>
</figure>
</li>
<li class="code">
<figure class="HTML">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
<figcaption>HTML</figcaption>
</figure>
<figure class="CSS">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
<figcaption>CSS</figcaption>
</figure>
<figure class="Javascript">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
<figcaption>Javascript</figcaption>
</figure>
<figure class="PHP">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
<figcaption>PHP</figcaption>
</figure>
</li>
</ul>
</section>
I got a problem with my html project. When I hoover an image it gets larger but it does not cover images next to each other. (only left one)
https://i.imgur.com/oNP4gHA.png
https://i.imgur.com/g2zIoSr.png
CSS:
.photo {
margin: 10px 0;
width: 120px;
background: white;
padding: 10px;
opacity: 1;
border-radius: 5px;
border: 1px solid silver;
box-sizing: border-box;
justify-content: space-around;
flex-wrap: wrap;
transform: rotate(5deg);
transition: 0.3s all ease-in-out;
will-change: transform;
align-items: flex-start;
display: inline-flex;
}
.photo img {
flex-basis: 100%;
width: 100px;
}
.photo figcaption {
margin-top: 10px;
}
.photo:nth-child(even) {
transform: rotate(-5deg) scale(0.8);
}
.photo:hover {
opacity: 1;
transform: scale(2.0);
z-index: 10;
}
HTML
{% for i in zdjecie %}
<figure class="photo" >
<img src="{{i.url}}"
alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
{% endfor %}
z-index won't function as expected on objects with static positioning.
Add position: relative to your .photo elements to fix the issue:
.photo {
margin: 10px 0;
width: 120px;
background: white;
padding: 10px;
opacity: 1;
border-radius: 5px;
border: 1px solid silver;
box-sizing: border-box;
justify-content: space-around;
flex-wrap: wrap;
transform: rotate(5deg);
transition: 0.3s all ease-in-out;
will-change: transform;
align-items: flex-start;
display: inline-flex;
position: relative; /* add this */
}
.photo img {
flex-basis: 100%;
width: 100px;
}
.photo figcaption {
margin-top: 10px;
}
.photo:nth-child(even) {
transform: rotate(-5deg) scale(0.8);
}
.photo:hover {
opacity: 1;
transform: scale(2.0);
z-index: 10;
}
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
I'm styling a site and I have a row of images in figure tags. I've had to make a couple of adjustments and now I can't get them aligned properly. This is how they should look -
And this is how they currently look -
I need all the images aligned as per the first image. Can't quite figure out how to do it as they're wrapped in a tags. Here's the code -
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
text-align: center;
}
.agencyproducts a {
display: inline-block;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 100px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
I made a flexbox of .agencyproducts with alignment in the center.
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.agencyproducts a {
display: inline-block;
}
.agencyproducts p {
text-align: center;
margin: 30px;
width: 100%;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 100px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://placehold.it/100/ff0000" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
</div>
</section>
section#products {
height: 600px;
max-width: 100%
}
.agencyproducts {
width: 100%;
text-align: center;
vertical-align: top;
}
.agencyproducts a {
display: inline-block;
vertical-align: top;
}
.agencyproducts p {
text-align: center;
margin: 30px;
}
.agencyproducts img {
width: 80px;
height: 80px;
}
figure {
text-align: center;
max-width: 100px;
height: 120px;
vertical-align: top;
margin: 10px;
font-size: 9px;
}
figure img {}
#products figcaption {
padding-top: 10px;
display: inline-block;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="http://localhost:8888/agency/2k4k-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/production.png" alt="Production">
<figcaption>2K / 4K PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/post-production/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/2d3d-animation/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/animation.png" alt="Animation">
<figcaption>2D / 3D ANIMATION</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/adhoc/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/interactive/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/tv-adverts/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="http://localhost:8888/agency/360-video/">
<figure>
<img src="http://localhost:8888/wp-content/uploads/2017/07/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
I have increased the height of the faigures, from 100 to 120 to be able to fit the second line of text. Then I added vertical-align:top so they would align.
I tried building a sidebar with some listview-like images. The column has a dynamic height and a header which should be always visible but not fixed. The content should be scrollable but without seeing a scrollbar. At first I tried to just push the scrollbar out of the container usind padding-right, but then I wont be able to use the 100% width on the images. So next there was display:table ... I read that overflow only works on display:block, but isnt there some way to make tables scrollable?
I am working with CONTAO as a CMS so I am bound by the templates (which I can edit to some degree). Here's the structure + CSS: https://jsfiddle.net/jf90ktb0/2/
HTML:
<aside id="left" class="column">
<div class="inside">
<h1 class="columnHeader">Title</h1>
<div class="mod_article">
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
<div class="ce_image">
<figure class="image_container">
<a href="#">
<img src="http://n22.imgup.net/Image_Plac000b.png"></img>
</a>
</figure>
</div>
</div>
</div>
</aside>
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
font: 87.5% Verdana, Arial, Helvetica, sans-serif;
}
img {
vertical-align: bottom;
}
.column {
display: inline-block;
background-color: #b2b2b2;
height: 50vh;
margin: 0px 3% 0px 3%;
float: left;
overflow: hidden;
}
#left {
width: 20%;
margin-left: 3%;
right: 0;
}
#left .inside {
height: 100%;
width: 100%;
overflow: hidden;
display: table;
}
#left .columnHeader {
background-color: #333;
color: #ffd800;
font-size: 1.5vw;
text-align: center;
text-transform: uppercase;
padding-top: 0.5vw;
padding-bottom: 0.5vw;
width: 20vw;
display: table-caption;
}
#left .mod_article {
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
display: table-row;
}
#left .ce_image {
width: 100%;
float: left;
display: table-cell;
}
#left .ce_image img {
width: 100%;
}
Hope someone can help me with this.
Here is your solution:
remove display: table-row;
and add this line to your css:
::-webkit-scrollbar {
width: 0px;
}