the should be a green tinted rectangular box at the base of grid_4, but it appears to be slightly shifted to the right and overlapping. What have I done wrong here?
.sellerdiv {
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;
}
}
.container {
width: 96%;
margin: 30px auto;
padding: 0 auto;
float:none;
text-align: center;
display: inline-block;
}
.grid_4 {
display: inline-block;
width: 28%;
margin-top: 15;
margin-left: 10px;
margin-right: 10px;
height: 400px;
vertical-align: top;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
position: relative;
cursor: pointer;
background-color:#f1f1f1;
border-radius: 3px;
}
.overlayname {z-index: 3; color: #ffffff;
left: 4%;
font-size: 22px;
position: absolute;
font-family: helvetica;
top:5%;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.65);
}
.overlayprice {z-index: 3; color: #ffffff;
left: 4%;
font-size: 12px;
position: absolute;
top: 33%;
font-family: helvetica;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.5);
}
.profilepic {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 70px;
}
.sellerdiv {
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;
<body>
<div class="container">
<div class="grid_4">
<div class="imgcontainer">
<img src="test.jpg" alt="" />
<div class="overlayname">test title</div>
<div class="overlayprice">test price</div>
</div>
<div class="textcontainer">
<p>Description</p>
</div>
<div class="sellerdiv">
<div class="sellerpic"><img src="test.jpg"></div>
</div>
</div>
<div class="grid_4">
<img src="test.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="grid_4">
<img src="test3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
http://jsfiddle.net/autoboxer/3583nazg/ note: if you full screen or expand the result window, you will see the boxes appear in 3 columns as intended.
Just give a left: 0; style to your .sellerdiv.
.sellerdiv {
...
left: 0;
}
Here is the working JSFiddle.
And here is the whole code.
.sellerdiv {
bottom: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;
}
}
.container {
width: 96%;
margin: 30px auto;
padding: 0 auto;
float:none;
text-align: center;
display: inline-block;
}
.grid_4 {
display: inline-block;
width: 28%;
margin-top: 15;
margin-left: 10px;
margin-right: 10px;
height: 400px;
vertical-align: top;
padding-top: 6px;
padding-left: 6px;
padding-right: 6px;
position: relative;
cursor: pointer;
background-color:#f1f1f1;
border-radius: 3px;
}
.overlayname {z-index: 3; color: #ffffff;
left: 4%;
font-size: 22px;
position: absolute;
font-family: helvetica;
top:5%;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.65);
}
.overlayprice {z-index: 3; color: #ffffff;
left: 4%;
font-size: 12px;
position: absolute;
top: 33%;
font-family: helvetica;
padding: 3px 8px 3px 8px;
background: rgba(0,0,0,.5);
}
.profilepic {
margin: 40px 0px 0px 0px;
border: 7px solid white;
border-radius: 70px;
}
.sellerdiv {
bottom: 0;
left: 0;
text-align: center;
position: absolute;
width: 100%;
height: 12%;
background-color: rgba(0, 255, 0, .2);
}
.sellerpic {
width: 11%;
position: absolute;
border-radius:80px;
}
<div class="container">
<div class="grid_4">
<div class="imgcontainer">
<img src="test.jpg" alt="" />
<div class="overlayname">test title</div>
<div class="overlayprice">test price</div>
</div>
<div class="textcontainer">
<p>Description</p>
</div>
<div class="sellerdiv">
<div class="sellerpic"><img src="test.jpg"></div>
</div>
</div>
<div class="grid_4">
<img src="test.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="grid_4">
<img src="test3.jpg" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
Related
I tried searching the web for various answers and tried everything that solved other people problem, but my CSS just doesn't want to cooperate.
Here you can find a JSFiddle where I recreated the issue: I would like the side navigation to be visible on the black sections too.
HTML
<div class="sidenav">
Section 1
Section 2
Section 3
</div>
<div class="content">
<div>
<p>Some text<p>
</div>
<div class="blk">
<p>Some text<p>
</div>
<div>
<p>Some text<p>
</div>
</div>
CSS
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #0D0D0D;
border-radius: 0 5px 5px 0;
color: #0D0D0D;
mix-blend-mode: difference;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
did you want something like this?
html {
scroll-behavior: smooth;
background: #fff;
}
body {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
background-color: #ffffff;
color: #0d0d0d;
}
/**********************************************/
.section {
width: 100vw;
max-width: 100%;
background-color: #ffffff;
text-align: center;
margin: 0;
padding: 15vh 0;
position: relative;
}
.blk {
background-color: #0d0d0d;
color: #ffffff;
}
/**********************************************/
.sidenav {
width: auto;
position: fixed;
z-index: 1;
top: 150px;
padding: 8px 0;
mix-blend-mode: difference;
}
.sidenav a {
clear: both;
float: left;
position: relative;
left: -20%;
padding: 10px;
margin-bottom: 15px;
transition: 0.3s;
text-decoration: none;
text-align: right;
font-size: 24px;
border-style: solid;
border-width: 2px;
border-color: #fff;
border-radius: 0 5px 5px 0;
color: #fff;
background-color: #000;
}
.sidenav a:hover {
left: -2px;
}
.sidenav a.selected {
left: -2px;
color: #000;
background-color: #fff;
cursor: default;
}
<!doctype html>
<html>
<head></head>
<body>
<div class="sidenav">
Section 1
Another Section
Last One
</div>
<div class="content" onclick="closeMenu()">
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
<div class="section blk" id="works">
<p>Some text<p>
</div>
<div class="section" id="works">
<p>Some text<p>
</div>
</div>
</body>
</html>
you need it add mix-blend-mode to parent element like sidenav, than change backround, color and border-color in a
I want to create chat component in such a way that if I display all its elements it will look like the following:
and if I remove most of the elements, the message will be shown in this way:
However my code has 4 problems:
the picture and the bubble element are not next to each other
the speech bubble do not get shorter with less text;
the text in the bubble doesn't centre vertically on its parent div, rather on the upper parent container;
the day-time element stay fix on the right, rather than being aligned to the right side of the speech-bubble.
I tried many options, but the more I touch the CSS, the more issues I create.
Any suggestion on how to achieve the desired result?
This is my code:
.container {
position: relative;
margin-left: 5%;
max-width: 90%;
height: auto;
}
.upper-text {
width: 100%;
color: black;
font-size: 12px;
line-height: 120%;
}
.message-container {
width: auto;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
display: inline-block;
}
.buble-wrapper {
max-width: 75%;
height: auto;
}
.speech-bubble {
background-color: #f0f0f0;
border-radius: 0 20px 20px 20px;
width: auto;
min-height: 40px;
}
.message {
color: black;
font-size: 16px;
padding-left: 4%;
padding-right: 4%;
top: 50%;
transform: translateY(-50%);
}
.lower-tex {
color: black;
font-size: 12px;
line-height: 120%;
text-align: right;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="message-container">
<div class="character-picture"></div>
<div class="buble-wrapper">
<div class="speech-bubble">
<div class="message">text message</div>
</div>
</div>
</div>
<div class="lower-tex">Monday: 20:38</div>
</div>
This should do what you're looking for. There is a lot of room for improvement, but this will get you started.
I've removed some of the html you had that I thought unnecessary and changed how you size and place some elements.
I suggest you take a look at CSS Flexbox and Grid, they allow you to do complex layouts like this in a breeze.
.container {
width: auto;
max-width: 250px;
display: inline-flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.upper-text {
color: black;
font-size: 12px;
align-self: flex-start;
line-height: 1.5;
}
.message-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
margin-right: 10px;
border-radius: 15px;
flex-shrink: 0;
}
.message {
color: black;
font-size: 16px;
word-wrap: break-word;
padding: 5px 10px;
border-radius: 15px;
background-color: #ccc;
display: flex;
align-items: center;
}
.lower-tex {
color: black;
font-size: 12px;
align-self: flex-end;
line-height: 2.5;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="message-container">
<div class="character-picture"></div>
<div class="message">text message example wow this text wraps very well</div>
</div>
<div class="lower-tex">Monday: 20:38</div>
</div>
As mentioned by DoHn, you can achieve this using flex or grid.
Below is the solution using grid.
Read more here complete-guide-grid
For browser support, checkout https://caniuse.com/#search=grid
.container {
display: grid;
grid-template-columns: 30px auto;
grid-gap: 2px 4px;
width: 360px;
}
.upper-text {
color: black;
font-size: 12px;
line-height: 120%;
grid-column: 1 / 3;
grid-row: 1;
}
.message-container {
width: auto;
}
.character-picture {
width: 30px;
height: 30px;
background-color: aqua;
border-radius: 50%;
grid-row: 2;
}
.speech-bubble {
background-color: #f0f0f0;
border-radius: 0 20px 20px 20px;
grid-column: 2 / 3;
grid-row: 2;
justify-self: stretch;
display: grid;
padding: 10px;
}
.message {
margin: auto 0;
}
.lower-text {
color: black;
font-size: 12px;
line-height: 120%;
justify-self: end;
grid-column: 2 / 3;
grid-row: 3;
}
<div class="container">
<div class="upper-text">Name</div>
<div class="character-picture"></div>
<div class="speech-bubble">
<div class="message">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley o</div>
</div>
<div class="lower-text">Monday: 20:38</div>
</div>
.container {
width: 500px;
height: 100px;
padding: 10px;
}
.container .chat-log {
width: 500px;
height: 100px;
margin-top: 20px;
}
.left-side {
width: 20%;
height: auto;
float: left;
}
.right-side {
width: 80%;
height: auto;
position: relative;
left: -15px;
float: right;
}
.text {
font-size: 14px;
text-align: center;
}
.thumbnail {
width: 50px;
height: 50px;
background: #000;
border-radius: 50%;
clear: both;
margin: 0 auto;
position: relative;
}
.thumbnail span.caption {
color: #fff;
text-align: center;
position: relative;
margin: 0;
padding: 0;
top: 30%;
left: 10%;
}
.msg {
position: relative;
width: auto;
height: auto;
text-align: justify;
padding: 20px;
background-color: #f0f0f0;
border-radius: 0px 20px 20px;
}
.msg::before {
content: " ";
position: absolute;
bottom: 79%;
transform: rotate(90deg);
left: -20px;
border-width: 10px;
border-style: solid;
border-color: #f0f0f0 transparent transparent transparent;
}
.time{
float: right;
margin-right:10px;
font-size: 12px;
}
<div class="container">
<div class="chat-log">
<div class="left-side">
<div class="text">
Name
</div>
<div class="thumbnail">
<span class="caption">image</span>
</div>
</div>
<div class="right-side">
<div class="msg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum tempore inventore architecto a voluptatum ratione, sunt doloribus nobis iure debitis? Veniam.
</div>
<div class="time">Monday 5:13 PM</div>
</div>
</div>
</div>
I hope this will help you. I do not use flexbox or grid I have made it simple.
Media queries question: how to change div position without changing HTML, only with CSS.
I want the contact form with all the inputs and button <div class="contact__form"> which is on the right, to be above the map, when in mobile version.
link to codepen in case: https://codepen.io/RakuRak/pen/oEGaBw
#map {
width: 100%;
z-index: 0;
position: absolute;
height: 100%;
top: 0;
}
.contact {
z-index: 1;
position: relative;
height: 600px;
border-top: 3px solid #3EAC37;
}
.contact__bottomBar {
position: absolute;
left: 10px;
bottom: 10px;
height: 50px;
background: rgba(255,255,255,0.85);
width: calc((100% / 3) * 2 - 30px);
text-align: center;
line-height: 50px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
}
.contact__form {
background: rgba(255,255,255,0.85);
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
width: calc(100% / 3);
float: right;
height: calc(100% - 20px);
position: relative;
z-index: 1;
padding: 20px;
margin-right: 10px;
margin-top: 10px;
.button {
display: block;
background: #fff;
text-transform: uppercase;
font-size: 20px;
color: #3EAC37;
i {
color: rgba(0,0,0,0.7);
padding-top: 5px;
padding-right: 6px;
}
&:last-of-type {
margin: 0;
}
}
label {
text-align: left;
display: block;
margin-bottom: 4px;
}
.form-horizontal {
background: #f5f5f5;
box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
padding: 10px;
.form-group {
margin-bottom: 20px;
&:last-of-type {
margin-bottom: 10px;
}
}
h4 {
margin-bottom: 20px;
}
input, textarea {
border: 1px solid #bbb;
&:active, &:focus {
border-color: #3EAC37;
box-shadow: 0 0 0 0.2rem rgba(62, 172, 55,.25)
}
}
.btn {
display: block;
width: 200px;
margin: 0 auto;
}
}
textarea {
min-height: 62px;
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<section id="contact" class="contact">
<div id="map"></div>
<div class="contact__bottomBar">
<i class="fas fa-map-marker-alt fa-md"></i> Lorem ipsum
</div>
<div class="contact__form">
<div class="button">
<i class="fas fa-phone-square fa-lg"></i><a class="link" href="tel:00000000">00 00 00 00</a>
</div>
<div class="contact__separator"></div>
<div class="button">
<i class="fas fa-envelope-square fa-lg"></i><a class="link" href="mailto:lorem#ipsum.net.com" target="_top">lorem#ipsum.net.com</a>
</div>
<div class="contact__separator"></div>
<form action="https://formspree.io/lorem#gmail.com" method="post" class="form-horizontal">
<h4>Napisz do nas</h4>
<div class="form-group">
<label for="user-name" class="control-label">Imię</label>
<input name="name" type="text" class="form-control" id="user-name" placeholder="Wpisz swoje imię/nazwę firmy">
</div>
<div class="form-group">
<label for="user-email" class="control-label">Email</label>
<input name="email" type="email" class="form-control" id="user-email" placeholder="Wpisz swój Email">
</div>
<div class="form-group">
<label for="user-message" class="control-label">Wiadomość</label>
<textarea name="user-message" id="user-message" class="form-control"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Wyślij</button>
</div>
</form>
</div>
</section>
You need to use media queries.
#media screen and (max-width: 767px) {
.contact__form {
width: 100%; // Whatever you want
}
}
I changed the postition as I wanted in first place, below CSS for mobile version:
#map {
// width: 100%;
// z-index: 0;
position: relative; //absolute//
height: 100%;
top: 0;
}
.contact__bottomBar {
position: absolute;
left: 10px;
right: 10px;
bottom: 10px;
height: 50px;
background: rgba(255, 255, 255, 0.85);
width: auto;
text-align: center;
line-height: 50px;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.contact {
// z-index: 1;
// position: relative;
height: 600px;
border-top: 3px solid #3EAC37;
}
.contact__form {
background: rgba(255,255,255,0.85);
box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
width: 100%;
// float: right;
// height: calc(100% - 20px);
// position: relative;
// z-index: 1;
padding: 20px;
margin-right: 10px;
margin-top: 10px;
}
footer {
background: rgba(0, 0, 0, 0.7);
text-align: center;
height: 40px;
line-height: 40px;
/* bottom: 0px; */
/* margin-bottom: -13px; */
margin-top: 600px;
color: #fff;
position: relative;
}
I have placed several paragraphs into div element but text are appearing at the bottom of block. What might be the problem? As well would be great if you can suggest how to make the blocks more responsive.
HTML:
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16,21,26,.9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-1 img {
position:relative;
right:150px;
}
.testimonial-block-2 img,
.testimonial-block-1 img{
position:relative;
right:150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position:relative;
left:160px;
z-index:100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom:1px dashed #222;
}
Jsfiddle
Use this for the images, otherwise (if you use position: relative , regardless of the settings) the space they usually occupy will remain reserved for them (i.e. empty) in the container:
position:absolute;
left: -150px;
and create a margin-bottom below the testemonial-blocks:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16,21,26,.9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block-1,
.testimonial-block-2 {
margin-bottom: 30px;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-2 img,
.testimonial-block-1 img{
position:absolute;
left: -150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position:relative;
left:160px;
z-index:100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom:1px dashed #222;
}
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
Try this:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(16, 21, 26, .9);
width: 100%;
}
.inner {
position: absolute;
left: 50%;
top: 40%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.testimonial-block-1 {
float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
margin-right: 45px;
position: relative;
z-index: 100;
}
.testimonial-block-1::after,
.testimonial-block-2::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255, 255, 255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index: 2;
}
.testimonial-block-1 img {
position: relative;
right: 150px;
}
.testimonial-block-2 img,
.testimonial-block-1 img {
position: absolute;
left: -150px;
max-width: 107px;
height: 106px;
}
.testimonial-block-2 {
float: right;
max-width: 364px;
background-color: #fff;
min-height: 100px;
position: relative;
left: 160px;
z-index: 100;
}
.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
border-bottom: 1px dashed #222;
}
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="testimonial-block-1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry.</p>
</div>
<div class="testimonial-block-2">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
I've changed the position: relative to position: absolute and added a negative left: -150px and removed the right: 150px.
i think this will do the trick, i used display:flex to set everything in the right place i also removed a few of the position:absolute. i believe this will save you a lot of unnecessary code and positioning and will make your code much cleaner.
https://jsfiddle.net/Lsjo988z/3/
html:
<div class="container">
<div class="content">
<div class="inner">
<h1><span>What</span> Clients Says</h1>
<div class="main-block">
<div class="chat-container align-start" >
<div class="row">
<div>
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
</div>
<div class="testimonial-block">
<p>- Staciya Trollio</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
<div class="chat-container align-center" >
<div class="row">
<div>
<img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
</div>
<div class="testimonial-block">
<p>- David Soul</p>
<p>Customer</p>
<p>Lorem Ipsum is simply dummy text of the printing
and industry. Lorem Ipsum has been the industry.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
css:
* {
padding: 0;
margin: 0;
box-sizing:border-box;
}
html, body {
height: 100%;
}
.container {
height: 100%;
background: url(bg.jpg);
min-width: 100%;
background-size: 100%;
font-family: sans-serif;
}
.content {
width: 100%;
height: 100%;
background-color: rgba(16,21,26,.9);
}
.inner {
width: 100%;
}
.inner h1 {
color: #3170a8;
text-align: center;
}
.inner h1 span {
color: #ee8129;
}
.main-block {
margin-top: 50px;
}
.chat-container{
display:flex;
flex-wrap:wrap
}
.row{
display:flex;
-webkit-box-orient: horizontal;
-webkit-flex-direction: row;
flex-direction: row;
}
.align-start{
justify-content: flex-start;
}
.align-center{
justify-content: center;
}
.img{
max-width: 107px;
height: 106px;
}
.testimonial-block {
width:290px;
margin-left:43px;
//float: left;
max-width: 364px;
background-color: #fff;
min-height: 100px;
//margin-right: 45px;
position:relative;
z-index:100;
}
.testimonial-block::after {
position: absolute;
top: 25%;
left: -20px;
content: '';
width: 0;
height: 0;
border-right: solid 20px rgb(255,255,255);
border-bottom: solid 20px transparent;
border-top: solid 20px transparent;
z-index:2;
}
.testimonial-block-1 img {
position:relative;
right:150px;
}
.testimonial-block p:nth-child(3) {
border-bottom:1px dashed #222;
}
for more information about display flex abilities you can read this really good explanation https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'd like to put the arrow of the box (:after) above the image, but z-index doesn't work.
I have this code in html
<div class="example clearfix">
<div class="element item-large">
<div class="item-text">
<span>march 15, 2015</span>
<h2>Chapter One</h2>
<p>Lorem ipsum dolor sit amet, <br /> consectetur adipisicing elit. Qui, aspernatur!</p>
</div>
<div class="item-image">
<img src="assets/images/box-1.jpg">
</div>
</div>
<div class="element item">
<img src="assets/images/box-2.jpg">
</div>
</div> <!-- end example -->
And this in CSS
.example{
width: 100%;
position: relative;
height: auto;
}
.example img{
width: 100%;
display: block;
max-width: 100%;
height: 100%;
max-width: 100%;
}
.example .item-large{
width: 70%;
height: 300px;
float: left;
position: relative;
}
.example .item{
width: 30%;
height: 300px;
float: left;
position: relative;
}
.example .item-image{
width: 30%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
}
.example .item-large .item-text{
padding: 50px;
width: 70%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
background-color: #fff;
position: relative;
}
.example .item-large .item-image-large{
width: 100%;
height: 300px;
float: left;
overflow: hidden;
z-index: 10;
}
.item-text{
position: relative;
}
.item-text:after{
content: " ";
position: absolute;
right: -15px;
top: 15px;
border-top: 15px solid transparent;
border-right: none;
border-left: 15px solid black;
border-bottom: 15px solid transparent;
z-index: 10;
}
Can anyone tell me why z-index in not working in my case??? thanks in advance.
https://jsfiddle.net/sgmq70L4/embedded/result/