Linked elements not working under specific width threshold

Support
#1

Using Cornerstone, we’ve noticed that there are some linked elements that aren’t working properly when the screen width goes under a certain threshold.

Both a button and a content area with an <a> tag have been doing the same thing. They work properly (link to their correct location and can be edited in Cornerstone when clicked), until the screen width becomes too small. (below 1248px)

Once you go below this width, you can no longer edit it in Cornerstone or click it on the front end to use the link.

After this point, when clicked or hovered over, they remain flat;links not working, not reacting to hover effects, and not being clickable to edit in Cornerstone.

#2

Hello @coloffdigital,

Thanks for asking. :slight_smile:

To see if there is any issues or bugs I added a button element in my dev setup. I then viewed the same on tablet and mobile resolutions and link elements are working fine in my setup.

In that regards I suggest you to please try out following solutions:

  1. Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
  2. Go to X > Settings and click on the Clear Style Cache button.
  3. If you are using Cloudflare or cache plugin, please clear cache. In Cloudflare, please disable CSS and JS minification.

You can take a look at following article to clear cache:

http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/

If problem is still there, please share website login details (URL/Username/password) in a secure note for us to take a closer look.

Thanks.

#3

Hey Prasant!

Thanks for your prompt response!

I’ve checked to make sure there were no updates and cleared the cache within X Theme, as you recommended.

Unfortunately, I’m still having the same problem. :confused:

#4

Hi,

I checked and can see that the floating block you added is covering the entire page on width < 1247 preventing all links from working.

To fix it, you can add the code below in Theme Options > CSS

@media only screen and (max-width: 1247px) {
#x-site .header .floating-block {
     bottom: auto;
}
}

As this is due to your theme customization, please note that we could no longer provide support for any issues that may arise in regards to this.

Thank you for understanding.

#5

Hey Paul,

That worked perfectly! A simple oversight on my part.

Thanks for the help! :slight_smile:

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.