Why do images inserted in the post content via the_content() go off the max-width?

Question

I have many containers over the said image itself such as col-md-10 which defines a max-width of 80% or so, this is how I generate my post:

<article id="single-post-<?php the_ID(); ?>" <?php post_class('single-post'); ?>>
    <?php
    $post_share = new Post_Share( array( 'facebook', 'twitter', 'gplus', 'pinterest' ), $post, $style = 'share-style-2' );
    echo $post_share->generate_share_links();
    ?>
    <header class="single-post-header">
        <div class="single-post-meta">
            <?php echo _s_show_post_info( array( 'author','time', 'category') ); ?>
        </div><!-- .post-meta -->

        <?php
        the_title( '<h1 class="single-post-title">','</h1>' );
        if ( has_category() ) : ?>
            <?php

            $categories = (array) wp_get_post_terms( get_the_ID(), 'category' );

            if ( !is_wp_error( $categories ) && !empty( $categories) ) { ?>
                <div class="single-post-secondary-meta">
                    <span class="single-post-category-span">posted in
                        <a class="single-post-category" href="<?php echo get_term_link( $categories[0] )?>"><?php echo $categories[0] -> name ?>
                        </a>
                    </span>
                </div><!-- .post-meta-2 -->
            <?php } ?>
        <?php endif; ?>
    </header><!-- .post-header -->  

    <?php if ( has_post_thumbnail() ) : ?>
        <div class="single-post-thumbnail">
            <a class="single-post-thumbnail-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php the_post_thumbnail(); ?>
            </a>
        </div><!-- .post-thimbnail -->
    <?php 
    endif; ?>

    <div class="single-post-content">
        <?php
            //echo wp_trim_words( get_the_content(), 40, '...' );
            the_content();
        ?>
    </div><!-- .post-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php 
get_template_part('template-parts/individual_post-related-posts');
?>

Specifically:

the_content();

Unfortunately, inserting an image results in this:

enter image description here

Setting .post-content { width: 100%; } fixes it, but given there are a lot of plugins out there and rules that can be over-written, this feels like a hack.

What am I missing, why is this happening?

0
Jonathan Guerin 8 months 2020-12-13T06:10:21-05:00 0 Answers 5 views 0

Leave an answer

Browse
Browse