Sidebar & header cutoffs!

Hi rgoldstein,

It looks like your site is built using Bootstrap, which uses a grid system of 12 columns per row.
See: https://getbootstrap.com/css/#grid

BLOG POSTS WIDTHS
The content area of your site is 8 columns wide, the sidebar is 4. To make it narrower, we’ll switch it to 9 columns wide for the content and the sidebar to 3.
Important! The column widths have to add up to 12, so if you take one away, add it to another. If it’s over 12, pushes a column to the next row.

To change the widths, you have to change the code, and your best bet to do that is to create a child theme.
See: https://codex.www.ads-software.com/Child_Themes

I also see the your theme has it’s own child themes. You may want to download that and work with it instead of creating your own child theme.
https://en-ca.www.ads-software.com/themes/health-care/

In any case, once you have the child theme, you’ll want to change a number of files so the content area is 9 columns wide instead of 8.

To change these files, you either add them to your child theme (copy & paste file from parent theme to child them.
See: https://codex.www.ads-software.com/Child_Themes#Template_Files )
or change the file if it’s already in the child theme.

The piece of code you’re looking for is:
<div class="<?php if( is_active_sidebar('sidebar-primary')) { echo "col-md-8"; } else { echo "col-md-12"; } ?>">

Change it to:
<div class="<?php if( is_active_sidebar('sidebar-primary')) { echo "col-md-9"; } else { echo "col-md-12"; } ?>">

Note: echo “col-md-8” to echo “col-md-9”;

You’ll find that code in the following files:

• archive.php
• author.php
• category.php
• index.php
• page.php
• single.php
• tag.php
• template-blog-with-rightsb.php

Try changing the code in each of those files in your child theme and have a look at the site.

You should see the content area is bigger, but the right column is pushed over. Believe it or not, that’s progress!

Next: Change the width of the sidebar.
This one is easier, it’s only 1 file

• sidebar.php

The code you’re looking for is:

<div class="col-md-4 secondory">

Change it to:

<div class="col-md-3 secondory">

Note: col-md-4 to col-md-3

In theory, all images etc. in the sidebar should re-size to fit.

HEADER IMAGE:
That one is a little simpler.
The problem is, the image is too big for the div it’s in. We need to tell the image to fit into its div container.

In your style sheet, try adding:

img.custom-logo {
    width: 100%;
    height: auto;
}

That should re-size your logo image to fit into the div.

Hope this helps.

Hi

For this your top header logo issue
find below code in header.php (Theme Package >> header.php) fine line no. 21

<div class="col-md-6">

and replace with below code

<div class="col-md-12">

Any confusion let me know

Thanks.

Thank you for the replies! I fixed the header and changed all the echos but then when I got to the sidebar, I didn’t have that line of code you mentioned – this is all I have…

<?php
//Template Name:Blog With Right Sidebar
get_header(); ?>
<!– HC Page Header Section –>
<div class=”container”>
<div class=”row”>
<div class=”hc_page_header_area”>
<h1><?php the_title(); ?></h1>
</div>
</div>
</div>
<!– /HC Page Header Section –>
<!– HC Blog right Sidebar Section –>
<div class=”container”>
<div class=”row hc_blog_wrapper”>
<!–Blog Content–>
<div class=”<?php if( is_active_sidebar(‘sidebar-primary’)) { echo “col-md-9”; } else { echo “col-md-12″; } ?>”>
<?php $paged = (get_query_var(‘paged’)) ? get_query_var(‘paged’) : 1;
$args = array( ‘post_type’ => ‘post’,’paged’=>$paged);
$post_type_data = new WP_Query( $args );
while($post_type_data->have_posts()):
$post_type_data->the_post();
global $more;
$more = 0; ?>
<div class=”hc_blog_section” id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<div class=”hc_post_date”>
<span class=”date”><?php echo get_the_date(‘j’); ?></span>
<h6><?php echo the_time(‘M’); ?></h6>
<span class=”year”><?php echo the_time(‘Y’); ?></span>
</div>
<div class=”hc_post_title_wrapper”>
<h2>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></h2>
<div class=”hc_post_detail”>
“><i class=”fa fa-user”></i><?php echo get_the_author(); ?>
<i class=”fa fa-comments”></i><?php comments_number( ‘No Comments’, ‘one comments’, ‘% comments’ ); ?>
<?php if(get_the_tag_list() != ”) { ?>
<div class=”hc_tags”>
<i class=”fa fa-tags”></i>“><?php the_tags(”, ‘, ‘, ‘
‘); ?>
</div>
<?php } ?>
</div>
</div>
<div class=”clear”></div>
<div class=”hc_blog_post_img”>
<?php $defalt_arg =array(‘class’ => “img-responsive”); ?>
<?php if(has_post_thumbnail()): ?>
“>
<?php the_post_thumbnail(”, $defalt_arg); ?>

<?php endif; ?>
</div>
<div class=”hc_blog_post_content”>
<p><?php the_content( __( ‘Read More’ , ‘health-center-lite’ ) ); ?></p>
</div>
</div>
<?php endwhile; ?>
<div class=”hc_blog_pagination”>
<div class=”hc_blog_pagi”>
<?php previous_posts_link( __(‘<span class=”meta-nav”>←</span> Older posts’,’health-center-lite’) ); ?>
<?php next_posts_link( __(‘<span class=”meta-nav”>←</span> Newer posts’,’health-center-lite’), $post_type_data->max_num_pages ); ?>
</div>
</div>
</div>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Hi rgoldstein,

You’re close! It looks like you’ve changed the content area, and it’s pushing the sidebar over — that’s right.

Now the width of the sidebar needs to be changed.

The file for that is: sidebar.php

The code you’re looking for is:
<div class="col-md-4 secondory">
Change it to:
<div class="col-md-3 secondory">
Note: col-md-4 to col-md-3

That should do it.

Lisa, you’re a god send. Thanks so much!