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;
}
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;
}
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;
}
If you don't want to completely rearrange the single.php template structure, you should just set some global CSS to apply the 100px left/right padding to all text nodes such as paragraphs and headings within .single.
.single p,
.single h1,
.single h2,
.single h3{padding:0 100px;} //although I suggest using responsive units, not px
.single p,
.single h1,
.single h2,
.single h3{padding:0 4.5rem;} //like this using rem's, em's or %
It depends on how you're adding your content within your pages, if you're using Gutenberg or a page builder/template plugin. But I would simply add padding to all paragraphs and headers within .post-content so that your text elements are the only parts that padding is applied to and not your images. You'll just need to make sure that you don't add any images within <p></p> tags. Try to use s to encapsulate your images instead.
You could also adding your images using CSS background-image or background property to a div with 100% width.
.single img{background:url(/img.png) no-repeat center center;background-size:cover;min-width:100%;width:100%;}
It really depends on how you're setting up your actual content in each page in WordPress. But whatever you do, you should really try to avoid negative margins or padding. It's only going to cause problems at some point with complex template systems like WordPress even if most of the site looks OK.