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.
Related
I'm new and I cant align my social redirect images to be centered to the "contact me" header. Text align doesn't work and other solutions I found for my problems just puts it in order vertically.
<link rel="stylesheet" href="styles.css">
<style>
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
display: inline-block;
position: relative;
}
.resize {
text-decoration: none;
width: 128px;
height: 128px;
display: inline-block;
}
</style>
</head>
<body>
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
</body>
</html>
Play around with the margins in .feature figure. I changed the size of the images and added a border to them so i could see what was going on.
.feature {
display: inline-block;
margin: 0px;
padding: 0px;
text-align: center;
}
.feature figure {
border: 1px solid #ccc;
display: inline-block;
margin: 0 8px;
}
.resize {
text-decoration: none;
width: 64px;
height: 64px;
display: inline-block;
}
[HEADER]
<h1>Contact Me!</h1>
<section class="feature">
<figure>
<a href="url">
<img class="resize" src="images/discord.png" alt="Discord"></a>
<figcaption></figcaption>
</figure>
<figure>
<a href="url">
<img class="resize" src="images/insta.png" alt="Instagram"></a>
<figcaption></figcaption>
</figure>
</section>
I have a problem with text and image.
This is the design that i want it:
I already code this but I have a problem with the text and image
This is in HTML css:
here is the code :
#font-face {
src: url(source/font/SansitaSwashed-Regular.ttf);
font-family: 'Sansita';
}
/* Default Styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Sansita', sans-serif;
}
.container {
height: 100vh;
width: auto;
padding: 0;
}
.feature-showcase {
list-style: none;
width: 100%;
}
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
.meal-photo {
width: 100%;
margin: 0;
overflow: hidden;
/*This is to prevent spilling out of images when we scale the images.*/
background: #000;
text-align: center;
}
.meal-photo img {
opacity: 0.7;
width: 100%;
height: 50vh;
position: relative;
/*This will scale the image in proportion to the 25% width set for meals-showcase-li*/
transform: scale(1.15);
/*This is a part of our "animation" for food images.*/
transition: transform 0.5s, opacity 0.5s;
/*animation - changing from this css setting to another will take some time*/
}
.meal-photo img:hover {
opacity: 1;
transform: scale(1.03);
/*Not 1 because we want to cover some whitespace below each image.*/
}
.text {
text-align: center;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kemanaa</title>
</head>
<body>
<div class="container">
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh1.jpg" alt="">
<!-- <p class="text">Oleh oleh</p> -->
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner1.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata1.jpg" alt="">
</figure>
</li>
</ul>
<ul class="feature-showcase">
<li>
<figure class="meal-photo">
<img src="source/image/oleh-oleh2.jpg" alt="">
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/kuliner2.jpg" alt=>
</figure>
</li>
<li>
<figure class="meal-photo">
<img src="source/image/wisata2.jpg" alt=" ">
</figure>
</li>
</ul>
</div>
</body>
</html>
if you guys have another advice or better code, it will be great.
this text is just for It looks like your post is mostly code; please add some more details.
I would suggest using the images as background for the elements instead of setting an img tag.
Check the guide here: https://www.w3schools.com/cssref/pr_background-image.asp
Instead of using
.feature-showcase li {
display: block;
float: left;
width: 33.3%;
/*3 li should occupy full width.*/
}
Try using flexbox
I suggest using this as example
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This could be one way to do it. My example is very simple so maybe you could use it as a starting point.
Here is a Codepen.
I presumed you wanted to use actual image elements.
HTML
<div class="container">
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
<div class="item">
<img src="https://source.unsplash.com/random/800x600" />
<div class="text">
<p>Text in here</p>
</div>
</div>
</div>
CSS
.container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 33.3333%;
height: 50%;
position: relative;
}
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
.text p {
color: white;
}
you can use display:Grid
basic example:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container figure {
position:relative
}
.container figure img {
height: 100%;
width: 100%;
}
.container figure figcaption {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 2em;
}
<div class="container">
<figure >
<img src="https://picsum.photos/id/251/500/300.jpg" alt="">
<figcaption>Oleh-oleh</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/252/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/253/500/300.jpg" alt="">
<figcaption>Wisata</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/254/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/255/500/300.jpg" alt="">
<figcaption>Kuliner</figcaption>
</figure>
<figure >
<img src="https://picsum.photos/id/256/500/300.jpg" alt="">
<figcaption></figcaption>
</figure>
</div>
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>
<center><figure>
<img class="img-circle" src="doctor.png" height="70" width="70" hspace="30"/><figcaption>Doctors</figcaption>
<img class="img-circle" src="lab.jpg" height="70" width="70" hspace="30"/><figcaption>Labs</figcaption>
<img class="img-circle" src="spa.png" height="70" width="70" hspace="30"/><figcaption>Spa</figcaption>
<img class="img-circle" src="gym.png"height="70" width="70" hspace="30"/><figcaption>Gym</figcaption>
</center></figure>
I may have misunderstood the question but I think this is what you want.
I've used display: inline-block; so that each figure will display horizontally (of course if there is not enough space it will move to the next line).
I also moved your HTML around a little so each image has it's own figure.
figure {
display: inline-block;
text-align: center;
margin: 20px;
}
figure a {
text-decoration: none;
}
<center>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Doctors</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Labs</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Gym</figcaption>
</a>
</figure>
<figure>
<a href="#">
<img src="http://placehold.it/70x70" width="70" height="70">
<figcaption>Spa</figcaption>
</a>
</figure>
</center>
Then of course you could start going a bit fancier, making it animated using css animations and using media queries
figure.menu {
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
height: 70px;
margin: 20px
}
figure.menu a {
text-decoration: none;
}
figure.menu figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: -30%;
opacity: 0;
width: 100%;
transition: all .3s ease-in-out;
}
figure.menu:hover figcaption {
bottom: 0;
opacity: 1;
}
#media only screen and (max-width: 500px) {
center {
width: 250px;
margin: 0 auto;
}
}
#media only screen and (max-width: 250px) {
center {
width: 110px;
margin: 0 auto;
}
figure.menu figcaption {
bottom: 0;
opacity: 1;
}
}
<center>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Doctors</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Labs</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Gym</figcaption>
</a>
</figure>
<figure class="menu">
<a href="#">
<img src="http://placehold.it/70x70">
<figcaption>Spa</figcaption>
</a>
</figure>
</center>
Mousing over one of the images/links will make the name slide in.
To get rid of the underlines of a link, all you will need to do in your CSS file is:
a {
text-decoration: none; // removes the underline for all links
color: inherit; // removes the blue color and sets the parents color for all links
}
To get a image and text horizontally aligned with each other, what I would do at least would be to create a few lists that you align horizontally and add some style to:
.horizontal-view ul {
list-style-type: none;
}
.horizontal-view li {
margin-left: auto;
margin-right: auto;
display: inline-table;
}
.picture {
margin-right: 10px;
}
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My First Image Caption</li>
</ul>
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My Second Image Caption</li>
</ul>
<ul class="horizontal-view">
<li>
<img src="https://placehold.it/70x70" class="picture" />
</li>
<li>My Third Image Caption</li>
</ul>
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;
}