0

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

On your CSS rule for the .single img, you are currently setting only the maximum width, and the padding you set applies to the image itself within the body's box.

Try setting the image to full width and pulling the sides out with negative margin:

.single img {
     width:100%;
     margin: 0 -100px;
     }
  • Unfortunately that didn't work. – user6738171 Jan 8 '17 at 14:16
  • his solution should work but you need to take off the max-width, so remove it or add max-width: initial; – RiddleMeThis Feb 7 at 20:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.