Having images on the bottom Pin

capljina2 · August 16, 2018, 4:40pm

$sql = "SELECT `name`, `email`, `comment` FROM `blog1`";
$result = $conn->query( $sql );
$count = 0;
$images = array("user1.jpg", "user2.jpg", "user3.jpg"); // 

if( $result->num_rows > 0 ) {
    // output data of each row
    while( $row = $result->fetch_assoc() ) {
            echo '
                <div class="comment-block">
                    '.( !empty( $images[$count] ) ? '<img src="images/blog/'.$images[$count].'">' : '').' <!-- Add the count to the images to use it as a key, add check to see if count is a key -->
                    <span class="name">'.$row['name'].'</span>
                    <span class="comment">'.$row['comment'].'</span>
                </div>
            '; 

        $count++; you want
        if( $count == 3 )
        {
          $count = 0; // Reset to 0 if 3 images have been shown
        }
    } 
}

I tried to figure by my self but it wont work,like put images in div echo ‘<div id=“mydiv4” style=“font-color:white; margin-top: −535px; padding-bottom:15px;”’; and put in class same class like from web page class=“comment-avatar pull-left” but wont work.So i tried now is your turn to try.Just edit or edit class.

images should be like on link http://slimhamdi.net/lina/demos/blog-post-dark.html

rpkamp · August 16, 2018, 6:29pm

What do you mean by “on the bottom Pin”?
Could you please post your CSS? It’s rather hard to see what can be done without it.

capljina2 · August 16, 2018, 7:13pm

sorry because css is too long

body,
html {
	font-size: 100%;
	padding: 0;
	margin: 0;
	height: 100%;
}

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Poppins', sans-serif, Calibri, Arial;
	color: #656c6d;
	font-size: 0.9em;
	font-weight: 400;
	background-color: #333;
}

.second-font {
	font-family: 'Open Sans', sans-serif;
	
}

.p-none {
	padding: 0 !important;
}

.m-none {
	margin: 0 !important;
}

.btn {
	font-family: 'Poppins', sans-serif, Calibri, Arial;
	box-shadow: none;
	border-radius: 0;
}

.btn i {
	font-size: 14px;
}

.btn:hover {
	box-shadow: none;
	color: #eee;
}

.uppercase {
	text-transform: uppercase;
}

.

================================================== */

body.dark .bl-main>section:nth-child(4),
body.dark .resume-container,
body.dark .resume-list-item:not(.is-active) .resume-list-item-inner,
body.dark .resume-card-header,
body.dark .bl-main>section:nth-child(4).bl-expand .contact .leftside{
	background:#111;
}
body.dark .bl-main>section:nth-child(2),
body.dark .bl-main>section:nth-child(3),
body.dark .resume-card-body,
body.dark .bl-main>section.bl-expand,
body.blog.dark,
body.blog.dark .btn.back {
	background-color: #222;
}
body.dark .page-title h2 span:first-child,
body.dark .page-title h2 span:nth-child(2)::before,
body.dark .personal-info h6,
body.dark .personal-info ul li span,
body.dark .resume-content h6,
body.dark .bl-main>section:nth-child(4).bl-expand .contact .rightside h6,
body.blog.dark  article h4,
body.blog.dark .sidebar .widget-title,
body.blog.dark .widget-tags ul > li a:hover {
	color:#fff;
}
body.dark .title-bg {
	color: rgba(255, 255, 255, 0.07);
}
body.dark .bl-content p,
body.dark .personal-info ul li,
body.dark .badges h6,
body.dark .bl-main>section:nth-child(4).bl-expand .contact .leftside,
body.dark .bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field label,
body.blog.dark .widget.recent-posts .entry-title a,
body.blog.dark .widget-search input{
	color:#eee;
}
body.dark .bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field label.active {
	color:#eee !important;
}
body.dark .my-picture {
	border: 3px solid #313131;
}
body.dark .resume-list-item {
    background: rgba(255, 255, 255, 0.1) !important;
}
body.dark .resume-card-header {
	border-bottom: 1px solid #333;
}
body.dark .resume-card {
	box-shadow: 0px 0px 2px rgba(255, 255, 255, 0.4);
}
body.dark .resume-list-item:not(.is-active):hover {
	background: rgba(255, 255, 255, 0.15) !important;
}
body.dark .badges h3 i,
body.dark .divider .fa{
	color:#777;
}
body.dark .divider .outer-line {
	border-bottom: 1px solid #555;
}
body.dark .resume-list-item-title {
	color:#888;
}
body.dark #bl-work-items>div a, body.dark .bl-main>section:nth-child(4).bl-expand .contact .leftside {
	border:1px solid #333;
}
body.dark .bl-main>section:nth-child(4).bl-expand .contact .leftside span i {
	color: rgba(255, 255, 255, .3);

	border-bottom:1px solid #555;
}
body.blog.dark p,
body.blog.dark  .meta span {
	color:#eee;
}
body.blog.dark  .widget {
	background-color:#333;
}
body.blog.dark  .widget.recent-posts ul li,
body.blog.dark  .sidebar ul.nav-tabs li {
	border-bottom: 1px solid #555;
}
body.blog.dark .sidebar ul.nav-tabs li a,
body.blog.dark .widget-tags ul > li a {
	color:#aaa;
}
body.blog.dark .meta {
	border-top: 1px solid #555;
    border-bottom: 1px solid #555;
}
body.blog.dark .pagination li:hover {
	background:#333;
}
body.blog.dark .pagination li a {
	color:#eee;
}
body.blog.dark .widget.recent-posts ul li:last-child {
	border: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}
body.blog.dark .comments-form  form .input-field label{
	color:#eee;
}
body.blog.dark .comments-form  form .input-field label.active {
	color:#eee !important;
}
body.blog.dark .comments-form  form .input-field input[type=text],
body.blog.dark .comments-form  form .input-field input[type=email],
body.blog.dark .comments-form  form .input-field textarea {
	color:#fff !important;
	border-bottom:1px solid #555;
}
body.blog.dark .comments-heading,
body.blog.dark .comments-list .comment-author,
body.blog.dark .comments-list .comment-reply {
	color:#fff;
}
body.blog.dark .comments-list .comment-date {
	color:#aaa;
}

/* Big Titles
================================================== */

.page-title {
	margin: 0 auto;
	width: 100%;
	position: relative;
}

.page-title h2 {
	font-size: 40px;
	position: relative;
	z-index: 0;
	font-weight: 900;
	text-transform: uppercase;
}

.title-bg {
	color: rgba(30, 37, 48, 0.07);
	font-size: 95px;
	left: 0;
	letter-spacing: 10px;
	line-height: 0.7;
	position: absolute;
	right: 0;
	top: 50%;
	text-transform: uppercase;
	font-weight: 800;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.title-heading {
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
	text-align: center;
	padding: 19px 0 15px;
	background-color: rgba(0, 0, 0, .8);
}

.bl-main>section.bl-expand .page-title h2 {
	font-size: 55px;


.bl-main>section:not(.bl-expand):hover .page-title h2 span:nth-child(2) {
	transform: translate3d(0, 105%, 0);
}

.page-title h2 {
	overflow: hidden;
}

.page-title h2 span {
	display: inline-block;
	position: relative;
	transition: transform 0.3s;
}

.page-title h2 span:first-child::before,
.page-title h2 span:nth-child(2)::before {
	position: absolute;
	content: attr(data-hover);
}

.page-title h2 span:first-child {
	color: #555;
}

.page-title h2 span:first-child::before {
	top: 105%;
}

.page-title h2 span:nth-child(2)::before {
	bottom: 105%;
	color: #555;
	-webkit-filter: blur(0.000001px);
}


/* Divider
================================================== */

.
.loaded #loader-wrapper .loader-section.section-left {
	-webkit-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 0.5s 0.5s ease-out;
	transition: all 0.5s 0.5s ease-out;
}

.loaded #loader-wrapper .loader-section.section-right {
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all 0.5s 0.5s ease-out;
	transition: all 0.5s 0.5s ease-out;
}

.loaded #loader {
	opacity: 0;
	-webkit-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

.loaded #loader-wrapper {
	visibility: hidden;
}

@-webkit-keyframes sk-rotateplane {
	0% {
		-webkit-transform: perspective(120px);
	}
	50% {
		-webkit-transform: perspective(120px) rotateY(180deg);
	}
	100% {
		-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
	}
}

@keyframes sk-rotateplane {
	0% {
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}
}


/* [ SECTIONS ] */


/*================================================== */

.bl-main {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-image: url(../images%20-%20Copy/main-photo.jpg);
}

.bl-main>section{
	position: absolute;
	width: 50%;
	height: 50%;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.bl-main>section:nth-child(2) {
	top: 0;
	left: 50%;
	background: #fff;
}

.bl-main>section:nth-child(3) {
	top: 50%;
	left: 0;
	background: #fff;
}

.bl-main>section:nth-child(4) {
	top: 50%;
	left: 50%;
	background: #eee;
}

.bl-box {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: default;
	opacity: 1;
}

.bl-main>section:not(.topleft) .bl-box {
	cursor: pointer;
}

.bl-box h2 {
	width: 100%;
	letter-spacing: 1px;
	margin: 0 auto;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	z-index: 111;
}

.bl-main>section .bl-icon-close {
	position: absolute;
	top: 35px;
	right: 50px;
	width: 30px;
	cursor: pointer;
	z-index: 100;
	opacity: 0;
	pointer-events: none;
}

.bl-content,
div.bl-panel-items>div>div {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	overflow-y: auto;
}

.

section.bl-expand .bl-box {
	opacity: 0;
	-webkit-transition: opacity 0s linear;
	-moz-transition: opacity 0s linear;
	transition: opacity 0s linear;
}

.bl-content,
.bl-icon-close {
	-webkit-transition: opacity 0.1s linear 0s;
	-moz-transition: opacity 0.1s linear 0s;
	transition: opacity 0.1s linear 0s;
}

section.bl-expand .bl-content,
section.bl-expand .bl-icon-close {
	pointer-events: auto;
	opacity: 1;
	-webkit-transition: opacity 0.3s linear 0.5s;
	-moz-transition: opacity 0.3s linear 0.5s;
	transition: opacity 0.3s linear 0.5s;
}

.bl-content p {
	margin: 0 auto;
	font-size: 15px;
	line-height: 2;
	color: #656c6d;
	font-weight: 400;
}


/* Top Left Section
================================================== */

.bl-main>section.topleft {
	top: 0;
	left: 0;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.bl-main>section.topleft:before {
	position:absolute;
	bottom: -36px;
    z-index: 1;
	right:0;
	content:url('../images/separator2.png');
	max-width:960px;
}

.

.resume-card.back .resume-card-name {
	opacity: .7;
}

.resume-card.back-back {
	transform: scale(0.8) translate(0, -128px);
	z-index: 0;
}

.resume-card.back-back .resume-card-name {
	opacity: .5;
}

.resume-card.back-back:hover {
	transform: scale(0.8) translate(0, -138px);
}

.resume-card-header {
	padding: 24px;
	text-align: center;
	background: #f2f2f2;
	border-bottom: 1px solid #ddd;
}

.resume-card-name {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 21px;
	transition: .3s ease opacity;
	opacity: .8;
}

.resume-card-body {
	background: white;
	padding: 0;
}

.resume-card-body-container {
	padding: 24px;
	display: flex;
	flex-flow: column;
}

.resume-content {
	position: relative;
}

.resume-content span.date {
	color: #aaa;
	font-size: 13px;
}

.resume-content h6 {
	font-size: 15px;
	margin-top: 0;
}
.resume-card-body.experience .resume-content h6, .resume-card-body.education .resume-content h6 {
	margin-bottom: 10px;
}
.resume-card-body.skills .resume-content h6 {
	margin-bottom:0;
}
.resume-content h6 span {
	font-weight: 600;
}

.resume-content p {
	font-size: 14px;
	padding-bottom: 20px;
	margin-top: 5px;
}

span.separator {
	height: 2px;
	width: 70px;
	margin-bottom: 24px;
}

.resume-list {
	width: 100%;
}

.resume-list-item {
	margin: 24px 0;
	padding: 30px;
	padding: 1px;
	cursor: pointer;
	user-select: none;
	transition: box-shadow .3s ease;
}

.resume-list-item {
	background: rgba(0, 0, 0, 0.08) !important;
	box-shadow: none;
}

.resume-list-item:not(.is-active) .resume-list-item-inner {
	background: #f2f2f2;
}

.resume-list-item:not(.is-active):hover {
	background: rgba(0, 0, 0, 0.15) !important;
}

.resume-list-item-inner {
	display: flex;
	padding: 33px 24px;
	align-items: center;
	font-size: 20px;
}
.resume-list-item.is-active {
	background: none !important;
}
.resume-list-item.is-active .resume-list-item-title {
	color:#fff;
}
.resume-list-item-title {
	margin: 0;
}


/*** Badges ***/

.badges {
	padding: 34px 0;
}

.badges h3 span {
	letter-spacing: 2px;
}

.badges h3 i {
	color: #ddd;
	display: block;
	margin-bottom: 20px;
}


/* Bottom Left Section - PORTFOLIO
================================================== */


/*** Direction-Aware Items ***/

#bl-work-items {
	list-style: none;
	position: relative;
	margin-bottom:45px;
}

#bl-work-items>div {
	float: left;
	padding-bottom: 24px;
	position: relative;
}

#bl-work-items>div a,
#bl-work-items>div a img {
	display: block;
	position: relative;
}

#bl-work-items>div a {
	overflow: hidden;
}

#bl-work-items>div a div {
	position: absolute;
	width: 100%;
	height: 100%;
}

#bl-work-items>div a div span {
	margin: 0 auto;
	text-transform: uppercase;
	color: #fff;
}

#bl-work-items>div a {
	display: block;
	transition: .3s ease-out;
	border: 1px solid #eff0f0;
}

#bl-work-items>div a span {
	color: #fff;
	font-size: 16px;
}


/*** Panels ***/

div.bl-panel-items,
div.bl-panel-items>div {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
}

div.bl-panel-items>div>div.row {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

div.bl-panel-items>div>div {
	max-width: 1170px;
	margin: 0 auto;
	opacity: 1;
	bottom: 90px;
	top: 45px;
	pointer-events: auto;
}

div.bl-panel-items>div>div h3 {
	font-size: 30px;
	margin: 0 0 14px 0;
}

div.bl-panel-items>div>div ul.project-details li {
	padding-bottom: 12px;
}

div.bl-panel-items>div>div p {
	font-size: 15px;
	margin: 16px 0 20px;
	line-height: 28px;
}

div.bl-panel-items>div>div hr {
	height: 1px;
	border: 0;
	background: rgba(0, 0, 0, .1);
}

div.bl-panel-items>div>div img {
	float: left;
	width: 100%;
	border: 4px solid rgba(0, 0, 0, .1);
}

div.bl-panel-items {
	top: 100%;
	z-index: 9999;
}

div.bl-panel-items>div {
	z-index: 0;
	opacity: 0;
	-webkit-transform: translateY(0);
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	-moz-transform: translateY(0);
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	transform: translateY(0);
	transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
	-ms-transform: translateY(0);
}

div.bl-panel-items nav {
	position: relative;
	background: transparent;
	z-index: 9999;
	box-shadow: none;
	width: 160px;
	display: block;
	margin: 0 auto;
	-webkit-transition: opacity 0.2s ease-in-out 0.5s;
	-moz-transition: opacity 0.2s ease-in-out 0.5s;
	transition: opacity 0.2s ease-in-out 0.5s;
}

div.bl-panel-items.bl-panel-items-show nav span {
	float: left;
	margin: 5px;
}

div.bl-panel-items nav span.bl-next-work,
div.bl-panel-items nav span.bl-previous-work {
	letter-spacing: 2px;
	display: block;
	line-height: 68px;
	cursor: pointer;
	transition: .1s ease-out;
	opacity: .5;
}

div.bl-panel-items nav span.bl-next-work i,
div.bl-panel-items nav span.bl-previous-work i {
	font-size: 22px;
}

div.bl-panel-items nav span.bl-next-work:hover,
div.bl-panel-items nav span.bl-previous-work:hover {
	opacity: 1;
}

div.bl-panel-items nav span:hover {
	cursor: pointer;
}

div.bl-panel-items nav span.bl-next-work {
	margin-left: 20px;
}

div.bl-panel-items nav span.bl-previous-work {
	margin-right: 20px;
}

div.bl-panel-items nav span.bl-icon-close {
	width: 60px;
	height: 60px;
	line-height: 60px;
	transition: .2s ease-out;
	color: #fff;
	opacity: .5;
}

div.bl-panel-items nav span.bl-icon-close:hover {
	opacity: 1;
}

div.bl-panel-items.bl-panel-items-show nav {
	opacity: 1;
	top: -80px;
}

div.bl-panel-items>div.bl-show-work {
	z-index: 1000;
	opacity: 1;
	-webkit-transform: translateY(-100%);
	-webkit-transition: -webkit-transform 0.5s ease-in-out;
	-moz-transform: translateY(-100%);
	-moz-transition: -moz-transform 0.5s ease-in-out;
	transform: translateY(-100%);
	transition: transform 0.5s ease-in-out;
	-ms-transform: translateY(-100%);
}

div.bl-panel-items>div.bl-hide-current-work {
	opacity: 0;
	-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	-webkit-transform: translateY(-100%) scale(0.5);
	-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	-moz-transform: translateY(-100%) scale(0.5);
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	transform: translateY(-100%) scale(0.5);
	-ms-transform: translateY(-100%) scale(0.5);
	z-index: 0;
}

div.bl-panel-items a.btn {
	background-color: rgba(0, 0, 0, .1);
	margin-bottom: 15px;
	height: 42px;
    line-height: 42px;
    font-size: 15px;
}

.carousel .carousel-item>img {
	cursor: -webkit-grab;
	border: none;
	border-radius: 0;
}

.carousel.carousel-slider {
	border: 4px solid rgba(0, 0, 0, .1);
}

.carousel .indicators {
	background: rgba(255, 255, 255, .4);
}

.carousel .indicators .indicator-item {
	background-color: #fff;
	width: 13px;
	height: 13px;
	margin: 24px 4px 16px;
}

.videocontainer,
.responsive-video {
	border: 4px solid rgba(0, 0, 0, .1);
}

.videocontainer {
	position: relative;
	padding-bottom: 54.55%;
	padding-top: 0;
	height: 0;
	overflow: hidden;
}

.videocontainer iframe,
.videocontainer object,
.videocontainer embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}


/* Bottom Right Section - CONTACT
================================================== */


/*** Left Side ***/

.bl-main>section:nth-child(4).bl-expand .contact .leftside {
	background: #f2f2f2;
	color: #656c6d;
	padding: 24px;
	font-size: 16px;
	border: 1px solid #ddd;
}

.bl-main>section:nth-child(4).bl-expand .contact .leftside h6 {
	margin: 18px 0;
	font-size: 20px;
}

.bl-main>section:nth-child(4).bl-expand .contact .leftside h6:first-child {
	margin-top:0;
}

.bl-main>section:nth-child(4).bl-expand .contact .leftside span i {
	padding-right: 10px;
	color: rgba(0, 0, 0, .2);
}


/* Social Media Icons */

ul.social-intro {
	margin: 0;
	display: inline-block;
}

.social-intro li {
	display: inline-block;
}

ul.social-intro li a {
	color: #fff !important;
	transition: .3s ease-out;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li a {
	width: 35px;
	height: 35px;
	display: block;
	line-height: 36px;
	border-radius: 50%;
	margin-right: 4px;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li.facebook a {
	background: #3b5998;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li.twitter a {
	background: #1da1f2;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li.google-plus a {
	background: #dd4b39;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li.linkedin a {
	background: #0077b5;
}

.bl-main>section:nth-child(4).bl-expand ul.social-intro li.dribbble a {
	background: #ea4c89;
}


/*** Right Side ***/

.bl-main>section:nth-child(4).bl-expand .contact .rightside {
	padding: 0 1.5rem;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside p {
	font-size: 14px;
	margin-top: 14px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field {
	margin-bottom: 24px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .submit-form {
	padding-left: 0;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .form-message {
	padding-right: 0;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form button {
	height: 42px;
	width: 100%;
	line-height: 42px;
	font-size:15px;
	transition: 0.3s ease-in-out;
}
.bl-main>section:nth-child(4).bl-expand .contact .rightside form .input-field input[type=text],
.bl-main>section:nth-child(4).bl-expand .contact .rightside form .input-field input[type=email],
.bl-main>section:nth-child(4).bl-expand .contact .rightside form .input-field textarea {
     border-bottom: 1px solid #ddd;
	 margin-left:40px;
	 width: calc(100% - 2.5rem);
}
.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field label {
	color: #555;
	margin-left: 38px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field label.active {
	color: #555 !important;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=text]:focus+label {
	color: #555;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=text]:focus,
.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=email]:focus,
.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field textarea:focus {
	border-bottom: 1px solid #555;
	box-shadow: none !important;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=text].valid,
.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=email].valid {
	border-bottom: 1px solid #28a745;
	box-shadow: none !important;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=text].invalid,
.bl-main>section:nth-child(4).bl-expand .contact .rightside .input-field input[type=email].invalid {
	border-bottom: 1px solid #dc3545;
	box-shadow: none !important;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .input-field i.prefix {
	font-size: 22px;
	top: 7px;
	color: #ccc;
	width: 1em;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .input-field label {
	font-size: 15px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .output_message {
	display: block;
	color: #fff;
	height: 42px;
	line-height: 42px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .output_message.success {
	background: #28a745;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .output_message.success:before {
	font-family: FontAwesome;
	content: "\f14a";
	padding-right: 10px;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .output_message.error {
	background: #dc3545;
}

.bl-main>section:nth-child(4).bl-expand .contact .rightside form .output_message.error:before {
	font-family: FontAwesome;
	content: "\f071";
	padding-right: 10px;
}

/* Blog Section
================================================== */
log .meta {
	    clear: both;
    padding: 15px 0;
    width: 100%;
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
	font-size: 14px;
}
body.blog .meta span {
	margin-right:15px;
	    display: inline-block;
}

/* Pagination */

body.blog .pagination {
	margin-bottom:60px;
}
body.blog .pagination li {
	border-radius: 50%;
    width: 32px;
    height: 32px;
    line-height: 36px;
	transition:.1s;
}
body.blog .pagination li:hover {
	background:#f2f2f2;
}
body.blog .pagination li.active a {
	color:#fff;
}
mydiv{
	margin-top: 247px;
  
    padding-top:47px;
    font-color:white;
}
mydiv1{
	margin-top: 247px;
  
    padding-top:47px;
    font-color:white;
}
body.blog .pagination li a {
	color:#656c6d;
}
body.blog .pagination li a i {
	    font-size: 20px;
}

/* Comments */

.comments-heading{
      margin-top: 40px;
    font-size: 28px;
}

.comments-list{
   list-style: none;
   margin: 0;
   padding: 20px 0;
}

.comments-list .comment{
   border-bottom: 1px solid #ddd;
   padding-bottom: 20px;
   margin-bottom: 30px;
}

.comments-list .comment.last{
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 0;
}

.comments-list img.comment-avatar{
   width: 82px;
   height: 82px;
   border-radius: 100%;
   margin-right: 25px;
}

.comments-list .comment-body{
   margin-left: 110px;
}

.comments-list .comment-author{
       font-weight: 500;
    font-size: 14px;
    color: #555;
}

.comments-list .comment-date{
     font-size: 12px;
}

.comments-list .comment-content{
   margin: 15px 0;
}

.comments-list .comment-reply{
   color: #555;
   text-transform: uppercase;
   font-weight: 600;
}

.comments-reply{
   list-style: none;
   margin: 0 0 0 110px;
}

/* Comments Form */

.comments-heading.add-comment{
      margin-top: 20px;
    margin-bottom: 40px;
}
.comments-form{
   margin-bottom: 0;
}

.comments-form .title-normal{
   margin-top: 0;
   line-height: normal;
   margin-bottom: 25px;
}

.comments-form .btn.btn-primary{
   padding: 10px 20px;
   float: right;
   margin: 20px 0 10px;
}
.comments-form  form .input-field input[type=text],
.comments-form  form .input-field input[type=email],
.comments-form  form .input-field textarea {
     border-bottom: 1px solid #ddd;
	 margin-left:40px;
	 width: calc(100% - 2.5rem);
}
.comments-form  .input-field label {
	color: #555;
	margin-left: 38px;
}

.comments-form  .input-field label.active {
	color: #555 !important;
}

.comments-form  .input-field input[type=text]:focus+label {
	color: #555;
}

.comments-form .input-field input[type=text]:focus,
.comments-form .input-field input[type=email]:focus,
.comments-form .input-field textarea:focus {
	border-bottom: 1px solid #555;
	box-shadow: none !important;
}

.comments-form .input-field input[type=text].valid,
.comments-form .input-field input[type=email].valid {
	border-bottom: 1px solid #28a745;
	box-shadow: none !important;
}

.comments-form .input-field input[type=text].invalid,
.comments-form  .input-field input[type=email].invalid {
	border-bottom: 1px solid #dc3545;
	box-shadow: none !important;
}

.comments-form  form .input-field i.prefix {
	font-size: 22px;
	top: 7px;
	color: #ccc;
	width: 1em;
}

.comments-form  form .input-field label {
	font-size: 15px;
}
.comments-form  .input-field {
    margin-bottom: 24px;
}
.comments-form button {
	height: 42px;
    width: 100%;
    line-height: 42px;
    font-size: 15px;
    transition: 0.3s ease-in-out;
}

/*** Sidebar ***/


}

/* Search Widget */

.widget.widget-search{
   padding: 8px 20px;
}

.widget-search input,
.widget-search input:focus{
   border: 0 !important;
   font-style: italic;
}

/* Recent Posts Widget */

.widget.recent-posts ul li{
   border-bottom: 1px solid #ddd;
   padding-bottom: 15px;
   margin-bottom: 17px;
}

.widget.recent-posts ul li:last-child{
   border: 0;
   padding-bottom: 0;
   margin-bottom: 0;
}

.widget.recent-posts .posts-thumb img{
   margin-right: 15px;
   width: 90px;
   height: 70px;
}

.widget.recent-posts .post-info .entry-title{
   font-size: 14px;
   font-weight: 700;
   line-height: 20px;
   margin: 0;
}

.widget.recent-posts .entry-title a{
   color: #555;
   font-weight: 600;
}
.widget.recent-posts .post-meta {
	line-height:0;
}

.widget.recent-posts .post-date{
   font-weight: 400;
   color: #999;
   text-transform: capitalize;
   font-size:13px;
}

/* Navigation Widget */

.sidebar ul.nav-tabs{
   border:0;
}

.sidebar ul.nav-tabs li a{
	color:#656c6d;
   border-radius: 0;
   padding: 0;
   padding-left: 0;
   font-weight: 600;
   display: inline-block;
}

.sidebar ul.nav-tabs li{
   color: #656c6d;
   line-height: normal;
   font-weight: 600;
   border-bottom: 1px solid #ddd;
   padding: 15px 0;
}

.sidebar ul.nav-tabs li:last-child{
   border-bottom: 0;
}

/* Tags Widget */

.widget-tags ul > li {
	display: inline-block;
	margin: 6px 6px 6px 0;
}

.widget-tags ul > li a{
	color:#656c6d;
   font-family: 'Lato', sans-serif;
	border: 1px solid #d6d6d6;
	display: block;
	font-size: 13px;
	padding: 5px 15px;
   font-weight: 600;
	transition: 0.1s;
}

.widget-tags ul > li a:hover{
	color: #fff;
   border: 1px solid transparent;
}

/* [ RESPONSIVE DESIGN STYLES ] */


/*================================================== */

@media (max-width: 1200px) {
	.title-bg {
		font-size: 80px;
	}
	.page-title h2 {
		font-size: 35px;
	}
}

@media (max-width: 992px) {
	.bl-main>section:nth-child(4).bl-expand .contact .rightside .submit-form {
		padding-right: 0;
	}
	.bl-main>section:nth-child(4).bl-expand .contact .rightside .form-message {
		padding-left: 0;
		margin-top: 15px;
	}
	.list-1 {
		margin-bottom: 0;
	}
	.list-2 {
		margin-top: 0;
	}
	.personal-info a.btn.btn-blog {
		margin-top: 25px;
		margin-left: 0;
	}
}

@media (max-width: 800px) {
	.bl-main>section {
		width: 100%;
	}
	.bl-main>section.topleft {
		height: 49%;
	}
	.bl-main>section:nth-child(2):not(.bl-expand) {
		left: 0;
		top: 49%;
		height: 17%;
		border-bottom: 1px solid #ddd;
	}
	.bl-main>section:nth-child(3):not(.bl-expand) {
		top: 66%;
		height: 17%;
		border-bottom: 1px solid #ddd;
	}
	.bl-main>section:nth-child(4):not(.bl-expand) {
		background: #fff;
		top: 83%;
		height: 17%;
		left: 0;
	}
	body.dark .bl-main>section:nth-child(2):not(.bl-expand),
	body.dark .bl-main>section:nth-child(3):not(.bl-expand) {
		border-bottom: 1px solid #333;
	}
	body.dark .bl-main>section:nth-child(4):not(.bl-expand), body.dark div.bl-panel-items.bl-panel-items-show nav {
		background: #222;
	}
	.resume-card.back .resume-card-name,
	.resume-card-name {
		opacity: 1;
	}
	.resume-card-2 {
		margin-bottom: 0;
	}
	.resume-cards {
		margin: auto;
		max-width: initial;
	}
	.resume-card {
		margin-bottom: 24px;
	}
	.resume-card.resume-card-1,
	.resume-card.resume-card-2 {
		position: relative;
		transform: none !important;
	}
	.resume-card.resume-card-2 {
		margin-bottom: 0;
	}
	.resume-list {
		max-width: 300px;
	}
	.resume-list {
		display: none;
	}
	.resume-list-item-inner {
		padding-top: 23px !important;
		padding: 20px !important;
	}
}

@media (max-width: 600px) {
	.bl-content>div.container.page-title {
		margin-top: 45px;
	}
	.bl-main>section:nth-child(4).bl-expand .contact .rightside {
		margin-top: 50px;
		padding: 0 15px;
	}
	.bl-main>section:nth-child(4).bl-expand .contact .leftside {
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 24px;
	}
		body.blog .container.page-title h2{
		font-size:35px;
	}
		body.blog .container.page-title .title-bg{
		display:none;
	}
	.divider {
		margin: 30px 0 60px;
	}
	.infos {
		padding-bottom:30px;
	}
	.col.personal-info {
		margin-top: 15px;
		padding: 0 15px;
	}
	.personal-info a.btn {
		margin-top:10px;
	}
	.personal-info p {
		margin-bottom: 5px;
	}
	.profile-picture,
	.resume-cards-container {
		padding: 0 15px !important;
	}
	div.bl-panel-items>div>div {
		top: 0;
		bottom: 0px;
	}
	div.bl-panel-items.bl-panel-items-show nav {
		top: -66px;
		background: #fff;
		width: 100%;
		text-align:center;
		height:66px;
	}
	div.bl-panel-items nav span.bl-icon-close, div.bl-panel-items nav span.bl-next-work, div.bl-panel-items nav span.bl-previous-work {
		color:#adadad;
		display:inline-block;
	}
	div.bl-panel-items.bl-panel-items-show nav span {
		float:initial;
		margin-top:2px;
		margin-bottom:1px;
	}
	.bl-content>.row>div {
		padding: 0;
	}
	.bl-main>section .bl-icon-close {
		top: 20px;
		right: 20px;
		width: 22px;
	}
	#bl-work-items>div {
		margin-bottom: 0;
		padding: 15px 15px 0;
	}
	.bl-expand .bl-box {
		height: 130px;
	}
	.bl-content>ul li {
		width: 40%;
	}
	.resume>div.col {
		padding: 0;
	}
	.bl-main>section:nth-child(4).bl-expand .contact .leftside, body.dark .bl-main>section:nth-child(4).bl-expand .contact .leftside {
		border-left: 0;
		border-right: 0;
	}
	div.bl-panel-items>div>div.row {
		display: block;
		padding: 15px 15px 76px;
	}
	.bl-main>section:nth-child(2).bl-expand,
	.bl-main>section:nth-child(3).bl-expand,
	.bl-main>section:nth-child(4).bl-expand {
		top: 0;
	}
	div.bl-panel-items>div>div.row>div {
		padding: 0;
	}
	.bl-content {
		bottom: 0;
	}
	div.bl-panel-items>div>div h3 {
		margin-top: 20px;
	}
	.bl-main>section:nth-child(4).bl-expand form>div,
	.bl-main>section:nth-child(4).bl-expand .bl-content>div>div>div.row>div {
		padding: 0;
	}
	#bl-work-items {
		margin-top:-15px;
	}
	.bl-main>section.bl-expand .title-bg{
		display:none;
	}
	body.blog article h4 {
		font-size:20px;
	}
	.widget {
		margin-bottom:15px;
	}
	.btn.back {
		border-left:0;
	}
	body.blog .btn.back {
		width:100%;
		border-left:0;
		margin-bottom: -6px;
	}
	body.blog article {
		margin-bottom:45px;
	}
	.comments-form button {
		margin-bottom:50px;
	}
	.comments-reply {
		margin-left:70px;
	}
	.comments-list .comment-date {
		display:none;
	}
	.comments-form form .input-field label {
		width:85% !important;
	}
}


}

i delete some part of a css but i think is not connect with image

capljina2 · August 16, 2018, 8:15pm

any help

Mittineague · August 16, 2018, 8:34pm

I looked to see if I could find the CSS for comment-block <div>s but got lost in the jungle.

To be clear, when you say “images on the bottom pin” you mean what I might say as “bottom align the images within the comment-block divs”? i.e. these:

capljina2 · August 16, 2018, 8:42pm

.comments-list img.comment-avatar{
   width: 82px;
   height: 82px;
   border-radius: 100%;
   margin-right: 25px;

i think is here problem,did you try do inspect on browser to see class or dlv which setting images.I couldnt find comment-block <div> , images on the bottom pin i meant images on the bottom page i have now

capljina2 · August 16, 2018, 9:19pm

I added in css

.comment-block{
   margin-bottom: 115px;
}

still has a problem

droopsnoot · August 17, 2018, 9:20am

You might be better asking in the CSS section of the forum, although the comments are output by PHP I don’t see that’s linked to the issue.

capljina2 · August 17, 2018, 9:22am

hmmmm

TechnoBear · August 17, 2018, 9:44am

I’ve moved the thread there.

@capljina2: to allow members to help you, please post the full HTML and CSS for the relevant section, or link to a live page.

capljina2 · August 17, 2018, 9:59am

give me link where you moved i used localhost ,cant send live link
on this is how to spouse be
http://slimhamdi.net/lina/demos/blog-post-dark.html

this is like is now

TechnoBear · August 17, 2018, 10:05am

The link in your post shows how you want things to appear, is that correct? The images should be at the top of the posts.

We need to see the code you are using which does not behave as expected in order to see what needs to be changed.

Forum Posting Basics

capljina2 · August 17, 2018, 10:11am

you have up php and css code

TechnoBear · August 17, 2018, 10:13am

Yes, but the CSS is targeting the HTML, so we need to see the HTML output by the PHP, rather than the PHP itself.

capljina2 · August 17, 2018, 10:22am

this will be enough

<!-- Comments Starts -->
						<div class="comments">
							<h3 class="comments-heading uppercase">17 Comments</h3>
							<ul class="comments-list">
								<li>
									<!-- Comment Starts -->
									<div class="comment">
										<img class="comment-avatar pull-left" alt="" src="images/blog/user1.jpg">
										<div class="comment-body">
											<div class="meta-data">
												<span class="comment-author">Dalel Boubaker</span>
												<span class="comment-date pull-right second-font">January 17, 2017</span>
											</div>
											<div class="comment-content">
											<p class="second-font">The very first thing I did when deciding to make the switch was to get in touch with every single person I have ever known and told them my decision. I told them the field I was going to be working in and as it became clear, even the date I was planning to leave my awful day job (in 30 days time).  </p></div>
											<div>
												<a class="comment-reply" href="#">Reply</a>
											</div>	
										</div>
									</div>
									<!-- Comment Ends -->

coothead · August 17, 2018, 10:52am

Hi there capljina2,

does this help…

<!DOCTYPE html>
<html lang="en">

<head>
<base href="http://slimhamdi.net/lina/demos/">
    <meta charset="utf-8" />
    <title>Blog Post - Lina Creative vCard, Resume, CV</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://fonts.googleapis.com/css?family=Poppins:400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <!-- Template CSS Files -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.animatedheadline.css" />
    <link rel="stylesheet" type="text/css" href="css/materialize.min.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/skins/yellow.css" />
</head>
<body class="dark blog">

<div class="comments">

<h3 class="comments-heading uppercase">17 Comments</h3>

<ul class="comments-list">
<li>

<!-- Comment Starts -->
<div class="comment">
<div class="comment-body">

<div class="meta-data">
 <span class="comment-author">Dalel Boubaker</span>
 <span class="comment-date pull-right second-font">January 17, 2017</span>
</div>

<div class="comment-content">
 <img class="comment-avatar pull-left" alt="" src="images/blog/user1.jpg">
 <p class="second-font">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
  consequat. Duis aute irure dolor in reprehen.
 </p>
</div>

<div>
 <a class="comment-reply" href="#">Reply</a>
</div>	

</div>
</div>
<!-- Comment Ends -->

<ul class="comments-reply">
<li>

<!-- Comment Starts -->
<div class="comment">												
<div class="comment-body">

<div class="meta-data">
 <span class="comment-author">Lina Marzouki</span>
 <span class="comment-date pull-right second-font">January 17, 2017</span>
</div>

<div class="comment-content">
 <img class="comment-avatar pull-left" alt="" src="images/blog/user2.jpg">
 <p class="second-font">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
  consequat. Duis aute irure dolor in reprehen.
 </p>
</div>

<div>
 <a class="comment-reply" href="#">Reply</a>
</div>	

</div>
</div>
<!-- Comment Ends -->

</li>
</ul>

<!-- Comment Starts -->
<div class="comment last">
<div class="comment-body">

<div class="meta-data">
 <span class="comment-author">Slim Hamdi</span>
 <span class="comment-date pull-right second-font">January 17, 2017</span>
</div>

<div class="comment-content">
 <img class="comment-avatar pull-left" alt="" src="images/blog/user3.jpg">
 <p class="second-font">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
  consequat. Duis aute irure dolor in reprehen.
 </p>
</div>

<div>
 <a class="comment-reply" href="#">Reply</a>
</div>	

</div>
</div>
<!-- Comment Ends -->

</li>
</ul>

</div>

</body>
</html>

coothead

capljina2 · August 17, 2018, 11:13am

not for me

TechnoBear · August 17, 2018, 11:34am

You’ll need to explain in what way that fails to meet your requirements, if you want further help with this.

capljina2 · August 17, 2018, 11:43am

fails here

echo '<div id="mydiv4" style="margin-left:256px; "';                 
			   echo '	
				
				<div class="comment-block">

i tried with class and div to move up but wont move also i tried in css but wont work.I if put margin-top:300px wont move but it makes gap between images.

Gandalf · August 17, 2018, 11:47am

What do you mean “it fails”? Do you get an error message? What happens?