How do I customize the column width on a single blog post for desktop viewing without disrupting the mobile/tablet?

Today marks my first day venturing down the WordPress development rabbit hole, so I appreciate any and all guidance given.

I recently signed up with BoldGrid, a drag and drop WP website builder, so I could have some guardrails as I set up my website. However, the blog page and posts page are less than aesthetically pleasing. After removing the sidebar widget, my blog posts stretched way too far across the page.

No problem, BoldGrid provides an easy margin/padding editor on the backend, so I made the changes accordingly. However, this completely screwed up the mobile viewing experience.

I contacted support and they suggested I make a child theme and “change the container class to something like and aligning it center, which would affect the column width without crushing the mobile view.”

I went ahead and installed Child Theme Configurator, created a child theme, and added the templates/content-single.php file to the child. When I went into the file to see if I could half understand what I should edit, I couldn’t make sense of things. Here is the code in full:

<?php
/**
* Single Template
*
* This file contains the markup for the single template.
*
* @package Prime
*/
?>

<?php while ( have_posts() ) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php do_action( ‘before_entry_title’ ); ?>
<header class=”entry-header”>
<?php get_template_part( ‘templates/entry-header’ ); ?>
<div class=”entry-meta”>
<?php boldgrid_posted_on(); ?>
</div><!– .entry-meta –>
</header><!– .entry-header –>
<?php do_action( ‘after_entry_title’ ); ?>
<div class=”entry-content”>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<nav class=”page-nav”><p>’ . __( ‘Pages:’, ‘bgtfw’ ), ‘after’ => ‘</p></nav>’ ) ); ?>
</div><!– .entry-content –>
<footer class=”entry-footer”>
<?php boldgrid_entry_footer(); ?>
</footer><!– .entry-footer –>
<?php boldgrid_post_nav(); ?>
<?php if ( comments_open() || get_comments_number() ) : ?>
<?php comments_template( ‘/templates/comments.php’ ); ?>
<?php endif; ?>
</article><!– #post-## –>
<?php endwhile; ?>

My best guess is that my focus should be on this section:

<div class=”entry-content”>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<nav class=”page-nav”><p>’ . __( ‘Pages:’, ‘bgtfw’ ), ‘after’ => ‘</p></nav>’ ) ); ?>
</div><!– .entry-content –>

I just can’t make any sense of where I would attempt making the column adjustments suggested by the support team. Any thoughts or suggestions are much appreciated.

Read more here:: How do I customize the column width on a single blog post for desktop viewing without disrupting the mobile/tablet?

Leave a Reply

Your email address will not be published. Required fields are marked *