On the desktop it looks great, but when I look at mobile and tablet view it is close to each other and the hover effect doesn’t appear.

This is the HTML CODE:

<center>
<ul class="grid cs-style-4">
<li>
<figure>
<img src="http://www.bikramyogawimbledon.com/wp-content/uploads/2014/10/SunsetYoga-2.jpg" alt="Yoga classes" />
<figcaption>
<h3>Book Class</h3>
<span>Appointments Only</span>
<a href="http://dribbble.com/shots/1115632-Camera">Click Here</a>
</figcaption>
</figure>
</li>
<li>
</center>

I want to make it visible on desktop and then change it up for mobile and tablet viewers.
How can I do this?
Help appreciated.
Thanks

Thanks for writing in! You can wrap your codes inside an visibility shortcode.

e.g.
[visibility type="visible-desktop"][custom_headline type="center" level="h1" looks_like="h2"]CONTENT HERE[/custom_headline][/visibility]

Hope it helps, Cheers!

It appears that your website is not using X theme. In-order to use all of our integrated short-codes, you need to activate X theme on your website.

Hope that helps.

Thanks.

I have it activated on my website.

Can you please provide me with HTML Visibility.

Thank you

X theme is still not active on your site. You can apply this classes to hide element on a certain screen width.

x-hide-xs = 480 & smaller
x-hide-sm = 481px to 767px
x-hide-md = 768px to 979px
x-hide-lg = 980px to 1199px
x-hide-xl = 1200px & up

Hope it helps, Cheers!