Modify Sidebar Content Sidebar Layout To Equal Width Sidebars

In this post, i’ll provide the CSS code which makes both the primary and secondary sidebars the same width when using the sidebar-content-sidebar layout.

layout settings

Here’s what the default sidebar content sidebar layout looks like.

default sidebar content sidebar layout

CSS Code

Simply paste this CSS code before your Media Queries near the end of your child themes style.css file.

And here’s the result

equal width sidebars


Comments

4 responses to “Modify Sidebar Content Sidebar Layout To Equal Width Sidebars”

  1. judy stoffo Avatar
    judy stoffo

    Hi Brad, I would like to adjust the color of links. I have asked WP but they are kind of giving me the run around. I’m using WP theme 2012. When you see the post on the right side. The Color is so light it’s hard to read. Or if you click on a link and then go back that grayed out link is really hard to read. Can you tell me how I can adjust this. Thank you in advance for your assistance. Regards, Judy

    1. Brad Dalton Avatar
      Brad Dalton

      Here’s the CSS code on Line 494 of your style.css file.
      [code]
      a {
      outline: none;
      color: #21759b;
      }
      a:hover {
      color: #0f3647;
      }
      [/code]

      1. Hi Brad Thank you for getting back to me. I’m not very technical and this is all very new to me. Would you please tell me where I can find Line 494 in my style.css file. I found something called a CSS Stylesheet Editor. But Nothing happened when I put in the code. What am I doing wrong? Thank you again for your time! Regards, Judy

        1. Brad Dalton Avatar
          Brad Dalton

          You need to use FTP to download the style.css file from your server.

          Its in your child theme.

          Then you need to open the file using a code editor like Notepad++ and make the changes.

          I can’t help you do that and it something you need to learn yourself or hire someone to do the work for you.

          Please use the contact form if this is what you want done for you.

          Another option is to use File Manager in your web hosts cPanel account to access the file and change the code.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.