The theme I use for this blog, Redline, hasn’t been updated in four years. After the latest WordPress update, I didn’t like what my sidebars looked like (I think I just forgot what they looked like before). Plus the narrow the blog text area on my wide screen monitor has been bugging me for years.
I looked around for a new theme, but I didn’t find one I liked (flat design sucks). So, here is my fix to make the layout fit different screen sizes a bit better. A truly responsive redesign would still be much better for mobile, but this is an easy quick improvement for my low activity blog. If you want to make similar modifications to your blog that is using the Redline theme, in your WordPress admin pages, go to Appearance, Customize Theme, then on the bottom right column, select Additional CSS and paste the below code:
#container { width: 95%; } /* the whole box of content */
#primary { width: 65%; } /* main blog article area */
#secondary { width: 32%; } /* sidebars */
#sidebar_left { width: 48%; } /* left sidebar */
#sidebar_right { width: 48%; } /* right sidebar */
#logo { background-color: black; height: 85px; width: 100%; } /* color match image; shorter banner */
#blog_header, #blog_header a { padding-top: 0px; } /* banner title alignment */
#feedarea { width: 90%; } /* site tag line and date at the top */
I looked at the author’s blog and it did much better on mobile than my site was doing. I still like the wide layout for big computer screens this gave me though. I will investigate more later, but since it works for me, it could be years till I get back to it. Way past time for bed.
Update: I came back to work on an actual Responsive Design and made a mess because its been a while since I messed with Responsive CSS. Instead I found a plugin, WPtouch, that creates a mobile version of the blog. It doesn’t have many built in customization options, at least for the free version, but works great and can be customized with CSS.
Leave a Reply