add css to only body text
Question
In my single wordpress posts I want to apply a padding of 100px to the left and right. The problem is that when I apply it to .single .post-content the images also get a padding. However, I want all of the images on the posts pages to be set to 100%. Is there a way to separate the actual body text and the images? This seems like a fairly simple question. But I can’t figure it out. Any help is appreciated.
single.php
<?php
get_header();
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<article class="post">
<?php $featuredImage = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); ?>
<div class="banner" style="background:url(<?php echo $featuredImage; ?>) no-repeat;"></div>
<?php wpb_set_post_views(get_the_ID()); ?>
<div class="post-info">
<h1 class="post-title"><?php the_title(); ?></h1>
<h2 class="post-date"><?php echo strip_tags(get_the_term_list( $post->ID, 'location', 'Location: ', ', ', ' • ' ));?><?php the_date('F m, Y'); ?></h2>
</div>
<div class="post-content"><?php the_content(); ?></div>
<div id="wrapper-footer"><div class="post-footer"><h1 class="post-footer-comment"><?php comments_popup_link ('No Comments', '1 Comment', '% Comments', 'post-footer-comment-count', 'none'); ?></h1><div class="share"><span>share</span> <?php get_template_part( 'share-buttons-post' ); ?></div></div>
<div class="post-footer-bloglovin"><h1>never miss a post</h1><h2><a href="#">follow on email'</a></h2></div></div>
<?php get_template_part( 'prevandnextpost' ); ?>
<?php get_template_part( 'related-posts' ); ?>
<?php comments_template(); ?>
</article>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
get_footer();
?>
css
.single .post-title,
.post-title a,
.post-title a:link, .post-title a:visited {
font-family: 'Questrial', sans-serif;
font-size:30px;
margin-left:6px;
margin: 0 auto;
color:#000000;
margin-bottom: 3px;
margin-top:30px;
}
.single .post-date {
font-family: 'Questrial', sans-serif;
font-size:13px;
margin-left:6px;
margin: 0 auto;
color:#000000;
}
.single .post-content {
text-decoration: none;
color: #000000;
display: block;
font-family: 'Crimson Text', serif;
font-size: 18px;
margin:0 auto;
margin-top: -50px;
}
.single .post-info {
background:#ffffff;
padding-left: 100px;
padding-right:100px;
max-width: 1865px;
background-position:center;
background-clip: content-box;
margin: 0 auto;
height:110px;
bottom:100px;
position: relative;
}
.single img {
max-width:100%;
padding: 0 0 0 0 !important;
height:auto;
}
0
body-class, css, post-content, text, the-content
4 years
2020-02-08T08:38:30-05:00
2020-02-08T08:38:30-05:00 0 Answers
74 views
0
Leave an answer