Search code examples
htmlcssmedia-queries

Can't select html text

I have run into a peculiar problem.

Some HTML text on my page becomes unselectable and its anchor descendants are not recognised when hovered (Tested in chrome).

You have to fulfill certain requirements to cause it to happen. Here is my example page:

http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/

If you reduce the browser window width to smaller than 520px (So my @media css kicks in) you are no longer able to highlight or select a link in the main body of text.

Can anyone see what is causing this?

Solution

  • <div id="sidebar>" is overlapping the #main div when the page size is reduced.

    Add z-index:100 to #main

    #main {
padding-top: 0.5em;
z-index: 100;
}