Having images on the bottom Pin

I added in css

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

still has a problem

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.

1 Like

hmmmm

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.

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

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

you have up php and css code

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

1 Like

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 -->

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

not for me

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

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.

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

no errors just i have not move images up

@coothead’s code produces this:

On narrower screens, it behaves like this:

Those images are at the top of the posts, as you said you wanted. If we have not understood your requirements, then please explain how they differ from the result here.

I want same like that

OK. The code which coothead posted above does exactly that.

If it does not behave the same way when you try to add it to your site, then either you have made a mistake, or there is some other rule conflicting with the styles.

Without seeing the exact, full HTML and CSS which you are using, we can’t diagnose the problem.

2 Likes

did you see code up for name and comment i am using mysql to enter and display from mysql can you make some php which will display images by side name an comment ,like on link.

PHP does not control the positioning; CSS does.

1 Like