WordPress tip: Fixing links which are not clickable

A few days ago, I noticed that some links in my blog posts were not clickable, or at least were only part-clickable. These were all near the right margin of the content column next to the sidebar on the right. Here’s an illustration of what was happening:

Clickable1 Clickable2

As I moved the cursor from left to right over the link Life Rocks 2.0, it would change from clickable (as indicated by the hand symbol in the top panel above) to unclickable (as indicated by the arrow in the lower panel above). Because it was near the right margin of the content column and next to the sidebar, I guessed the problem was something to do with the sidebar margin. Unfortunately, I have very little knowledge of css and php and most of what I’ve learned so far in tweaking a free WordPress theme has been through good old trial and error – keep messing around until you get the desired result. I figured that there must be an overlap of the sidebar left margin onto the content column and this was affecting links near the right margin of the content column. Perhaps someone will put me right here.

Unlike previous tweaking, I got a result pretty much straight off. This is what I did. I opened the theme’s style.css file and tried changing the width of the content-wrapper and sidebar-wrapper until things worked.

Here’s the relevant section of code before:

#content-wrapper
{
width: 60%;
float: left;
}
#content
{
float: left;
padding: 0 0 10px 30px;
}
#sidebar-wrapper
{
width: 35%;
float: right;
}
#sidebar
{
float: right;
padding: 0px 15px 10px 10px;
width: 210px;
margin-right: 15px;
margin-top: 0px;

and I changed this to:

#content-wrapper
{
width: 70%;
float: left;
}
#content
{
float: left;
padding: 0 0 10px 30px;
}
#sidebar-wrapper
{
width: 25%;
float: right;
}
#sidebar
{
float: right;
padding: 0px 15px 10px 10px;
width: 210px;
margin-right: 15px;
margin-top: 0px;

So changing the width of the content-wrapper from 60% to 70% and changing the width of the sidebar-wrapper from 35% to 25% made all the links near the sidebar completely clickable as shown below:

Clickable3

Very satisfying when you get a quick result.

So, I’d suggest you have a quick look at any links on your blog near the right margin with the sidebar and see if they’ve been masked by the sidebar margin. It may be just a simple fix in the style.css file.

Any css experts care to comment on what’s happening here? Is there any other tweak I could have used to sort out this problem?

One Response

  1. Chip Says:

    Hi, can you help me with hmarfc.com

    The top sidebar in the homepage link is not working..only when one clicks on the Read more…it is working.

    Thanks

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment. Please do not use keywords in the Name field. Comments must relate to the post topic. This website is here to help people, not for advertising purposes.

Please complete puzzle and then submit your comment *
Time limit is exhausted. Please reload CAPTCHA.

` `