BugFix for wordpress colorlib unite theme: links not clickable on mobile
The bug occurs when viewing the wordpress colorlib unite theme from a mobile device. The bug does not allow you to press hyper links within certain page content. This results in wordpress links not working on mobile and wordpress links not clickable issues.
The fix is to add style="float:left;" to the div containing the secondary widget area. This is line 8 in file “/www/wp-content/themes/unite/sidebar.php”.
The original div element: < d i v id="secondary" class="widget -area col -sm -12 col -md -4" role="complementary" styl e="f loat:l ef t;">
After adding the bug fix: < d i v id="secondary" class=" widget - area col -sm- 12 col -md -4" role="complementary">
Why does this happen?
I will explain how I found the bug, and the reason the bug occurs.
In the image below, you can see what the main page looks like on desktop. Notice, that the link ‘projects’ at the bottom of the post, above the search bar is clickable.
The image below shows what the page looks like on mobile devices.
The first thing to notice is the search bar is now spanning off the page. It is also not possible to click the ‘projects’ link at the bottom of the post anymore. Infact, any link contained in the post content is not clickable at all. Note, this is when the width of the page becomes roughly 765px or less. This means that any links contained in the post is not clickable on mobile devices of 765px or less.
The reason for the bug is because of the secondary div containing the side bar elements, in this case the search bar and recent posts, covers up the primary div. This is shown in the images below. The first image on the left shows the area of the primary div highlighted in light blue, and the image on the right shows the area of the secondary div. As you can see, the area of the secondary div overlaps the entire post content. Thus covering up any links on the page, and making them completely un-clickable.
The fix for this bug is to add style="float:left;" to the div containing the secondary div. This allows the div the appear below the primary div, not covering it as before. The effect of the bug fix can be seen in the images below. The secondary div is positioned below the primary div on various mobile views.
Bug is mentioned here: https://colorlib.com/wp/forums/topic/mobile-secondary-widget-position-and-size/#post-115779