Title: Sidebar & header cutoffs!
Last modified: September 1, 2016

---

# Sidebar & header cutoffs!

 *  Resolved [rgoldstein](https://wordpress.org/support/users/rgoldstein/)
 * (@rgoldstein)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/)
 * Hi – trying to figure out how to make the blog posts column (to select blog posts
   on the side of each page) thinner. How can I do that? It is infringing and manipulating
   some of my photos that have text and I don’t need it as big as it is currently.
   Thanks so much! Also, I’m not a coding savant so the more simple and clear direction,
   the better. Sorry, I meant to change the width of the entire right sidebar, if
   that wasn’t already clear. I tried looking into the width of the sidebar in the
   style.css file but after messing around I couldn’t do anything. Anyway, the site
   is [http://www.goldsteindental.org](http://www.goldsteindental.org) thanks!
 * In addition – while trying to figure out this above issue, somewhere I have messed
   the coding for the top header so that it is cutting off half my logo – where 
   in the coding is this happening??? UGH!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [Lisa](https://wordpress.org/support/users/workingwebsites/)
 * (@workingwebsites)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653038)
 * Hi rgoldstein,
 * It looks like your site is built using Bootstrap, which uses a grid system of
   12 columns per row.
    See: [http://getbootstrap.com/css/#grid](http://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.wordpress.org/Child_Themes](https://codex.wordpress.org/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.wordpress.org/themes/health-care/](https://en-ca.wordpress.org/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.wordpress.org/Child_Themes#Template_Files](https://codex.wordpress.org/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.
 *  [Imran Ali](https://wordpress.org/support/users/imranaliweb/)
 * (@imranaliweb)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653070)
 * 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.
 *  Thread Starter [rgoldstein](https://wordpress.org/support/users/rgoldstein/)
 * (@rgoldstein)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653123)
 * 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’ ); ?>](https://wordpress.org/support/topic/sidebar-header-cutoffs/?output_format=md#)
   <?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();?
   >
 *  [Lisa](https://wordpress.org/support/users/workingwebsites/)
 * (@workingwebsites)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653131)
 * 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.
 *  Thread Starter [rgoldstein](https://wordpress.org/support/users/rgoldstein/)
 * (@rgoldstein)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653140)
 * Lisa, you’re a god send. Thanks so much!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Sidebar & header cutoffs!’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/health-center-lite/1.8.1/screenshot.
   png)
 * Health-Center-Lite
 * [Support Threads](https://wordpress.org/support/theme/health-center-lite/)
 * [Active Topics](https://wordpress.org/support/theme/health-center-lite/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/health-center-lite/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/health-center-lite/reviews/)

## Tags

 * [ccs](https://wordpress.org/support/topic-tag/ccs/)
 * [Coding](https://wordpress.org/support/topic-tag/coding/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [html](https://wordpress.org/support/topic-tag/html/)
 * [problem](https://wordpress.org/support/topic-tag/problem/)
 * [sidebar](https://wordpress.org/support/topic-tag/sidebar/)

 * 5 replies
 * 3 participants
 * Last reply from: [rgoldstein](https://wordpress.org/support/users/rgoldstein/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/sidebar-header-cutoffs/#post-7653140)
 * Status: resolved