Anybody see what needs fixing in the styling? - php

Question

So I created a comments section for a WordPress theme I am developing and after a good half hour of trying to figure out what went wrong in the labeling of the styling, I am stumped So the problem is the article.post img styling is affecting the comment-meta img. One should not be affecting the other.
I am also providing what it looks like in Chrome developer tools Elements:
<img alt="" src="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=80&d=mm&r=g" srcset="http://1.gravatar.com/avatar/4f9ce072cb3fdb377cbb1a083d5c7d1a?s=160&d=mm&r=g 2x" class="avatar avatar-80 photo" height="80" width="80">
This is the style.css:
body {
padding-top: 20px;
font-size: 15px;
color: #7a7a7a;
line-height: 1.7em;
}
a {
color: #0faf97;
}
.btn-primary {
background: #0faf97;
color: #fff;
border-color: #fff;
}
.btn-primary:hover {
background: #fff;
color: #0faf97;
}
.container {
max-width: 1020px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
background: #0faf97;
}
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
padding-top: 90px;
padding-bottom: 90px;
color: #fff;
}
footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
}
.block {
border:#ccc solid 1px;
padding: 20px 20px 30px 20px;
text-align: center;
}
.block h2 {
color: #0faf97;
}
.fa {
color: #0faf97;
}
.fa-3 {
font-size: 4em !important;
}
.marketing {
margin: 40px 0;
}
.content-region-1 {
background: #0faf97;
color: #ffffff;
text-align: center;
}
.content-region-2 {
background: #f4f4f4;
color: #333333;
}
.content-region-3 {
background: #000000;
color: #ffffff;
}
.content-region-2 img {
width: 100%;
}
.content-region-3 h4 {
}
.content-region-1 h1, .content-region-2 h3 {
margin: 0;
padding: 0;
padding-bottom: 15px;
font-size: 40px;
}
.content-region-3 form input[type="text"], .content-region-3 form textarea {
width: 100%;
padding: 5px;
background: #333;
color: #fff;
margin-bottom: 10px;
border: 0;
}
.pt20{padding-top: 20px;}
.pb20{padding-bottom: 20px;}
.pt30{padding-top: 30px;}
.pb30{padding-bottom: 30px;}
.pt40{padding-top: 40px;}
.pb40{padding-bottom: 40px;}
.pt50{padding-top: 50px;}
.pb50{padding-bottom: 50px;}
.pt60{padding-top: 60px;}
.pb60{padding-bottom: 60px;}
.side-widget {
margin-bottom: 40px;
}
.side-widget h3 {
border-left: 5px #0faf97 solid;
padding-left: 10px;
margin-bottom: 15px;
}
.title-bar {
background: #0faf97;
color: #ffffff;
padding-bottom: 10px;
border-bottom: 6px #ddd solid;
margin-bottom: 20px;
}
article.post {
border-bottom: 1px #ccc solid;
overflow: auto;
padding-bottom: 30px;
margin-bottom: 40px;
}
article.post .meta {
border-top: #ccc solid 1px;
border-bottom: #ccc solid 1px;
overflow: auto;
list-style: none;
margin: 0;
padding: 5px 0;
}
article.post .meta li {
float: left;
margin-right: 20px;
}
article.post img {
width:100%;
height: auto;
margin-bottom:20px;
}
.panel-heading {
background: #0faf97 !important;
color: #fff !important
}
.sidebar-widget ul {
padding: 0 !important;
list-style: none;
}
.sidebar-widget li {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.comments {
border: 1px #ccc solid;
padding: 10px;
margin-bottom: 20px;
margin-top: 10px;
}
.comments h2, .comments h3 {
background: #0faf97;
color: #fff;
padding: 5px;
}
.comment-body {
border: #ccc 1px solid;
margin-bottom:10px;
.comment-meta {
background: #333;
color: #fff;
padding: 10px;
overflow: auto;
}
.comment-meta img {
float: left;
margin-right: 10px;
}
.comment-meta time {
margin-left: 12px;
}
.comment-reply-link {
background: #0faf97;
color: #fff;
display: inline-block;
padding: 10px 15px;
}
.comment-form input, .comment-form textarea {
width: 100%;
padding: 3px;
border: #ccc 1px solid;
margin-bottom: 20px;
}
This is the comments.php file:
<div class="comments">
<h2>Comments</h2>
<?php $args = array(
'walker' => null,
'max_depth' => '',
'style' => 'ul',
'callback' => null,
'end-callback' => null,
'type' => 'all',
'reply_text' => 'Reply',
'page' => '',
'per_page' => '',
'avatar_size' => 80,
'reverse_top_level' => null,
'reverse_children' => '',
'format' => 'html5', // or 'xhtml' if no 'HTML5' theme support
'short_ping' => false, // #since 3.6
'echo' => true // boolean, default is true
);
?>
<?php wp_list_comments($args, $comments); ?>
<?php
$form_args = array(
'label_submit' => 'Send',
'title_reply' => 'Write a Reply or Comment',
'comment_notes_after' => '',
'comment_field' => '<p class="comment-form-comment"><label for="comment">'._x('Comment','noun').'</label><br /><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p>',
);
comment_form($form_args);
?>
</div>
When I alter the article.post img css it also affects the avatar image. I can't figure out how to alter that behavior. The avatar image is way too big and I just want to make it thumbnail size.
Here is the single.php file:
<?php get_header(); ?>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<article class="post">
<section class="row title-bar">
<div class="container">
<div class="col-md-12">
<h1><?php the_title(); ?></h1>
</div>
</div>
</section>
<section class="row main">
<div class="container">
<?php if(is_active_sidebar('sidebar')) : ?>
<div class="col-md-8">
<?php else : ?>
<div class="col-md-12">
<?php endif; ?>
<article class="post">
<div class="post_thumbnail">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
</div>
<ul class="meta">
<li>By <?php the_author(); ?></li>
<li><?php the_time('F j, Y g:i a'); ?></li>
<li>
<?php
$categories = get_the_category();
$separator = ", ";
$output = '';
if($categories){
foreach($categories as $category){
$output .= ''.$category->cat_name .''.$separator;
//$output .= $category->cat_name . $separator;
}
}
echo trim($output, $separator);
?>
</li>
</ul>
<br>
<?php the_content(); ?>
</article>
<div class="clr"></div>
<?php endwhile; ?>
<?php endif; ?>
<?php comments_template(); ?>
</div>
<?php if(is_active_sidebar('sidebar')) : ?>
<div class="col-md-4">
<?php dynamic_sidebar('sidebar'); ?>
</div>
<?php endif; ?>
</div>
</section>
<?php if(is_active_sidebar('content-region-1')) : ?>
<?php dynamic_sidebar('content-region-1'); ?>
<?php endif; ?>
<?php if(is_active_sidebar('content-region-2')) : ?>
<?php dynamic_sidebar('content-region-2'); ?>
<?php endif; ?>
<?php get_footer(); ?>
When I alter article.post img it changes the avatar img in comment section, but it also alters the blog images. Not sure that ended up happening. In theory, if I had done this correctly, comment-meta img should be what alters the avatar image. Chrome developer tools outputs this as CSS:
element.style {
}
article.post img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.comment-meta img {
float: left;
margin-right: 10px;
}
img {
vertical-align: middle;
}
img {
border: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img[Attributes Style] {
height: 80px;
width: 80px;
}
Inherited from footer.comment-meta
.comment-meta {
background: #333;
color: #fff;
padding: 10px;
overflow: auto;
}
footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
user agent stylesheet
li {
display: list-item;
text-align: -webkit-match-parent;
}
Inherited from body.post-template-default.single.single-post.postid-20.single-format-standard.logged-in.admin-bar.wp-custom-logo.customize-support
body {
padding-top: 20px;
font-size: 15px;
color: #7a7a7a;
line-height: 1.7em;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Inherited from html
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
Pseudo ::before element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 1

The article.post img selector targets all images that are inside the article.post element. This includes your avatar images.
If you don't want to target the avatars, then make your selector more specific. Try this instead:
article.post .post_thumbnail img {
width: 100%;
height: auto;
margin-bottom: 20px;
}
Now, only images that are descendants of article.post and .post_thumbnail will get the styles.
revised fiddle