`Zavolejte mi na:<br>
<a class=”mobilesOnly” href=”tel:+420 734 688 014″>+420 734 688 014 </a>
<br>
<br>
nebo vyplňte
<br>
<a href=”http://www.karelzitny.cz/kontakt/” target=”_blank”>KONTAKTNÍ FORMULÁŘ.</a>
<br>
<br>
You can try targetting your mobilesOnly class with a media query, to hide it on larger screens.
For example, this would hide anything in an element with the class on screens over 420px:
@media screen and (min-width: 420px) {
.mobilesOnly {
display: none;
}
}
Adjust your HTML a little to remove the class from the anchor tag, and add the class instead to a div with that class:
<div class="mobilesOnly">
Zavolejte mi na:<br>
<a href="tel:+420 734 688 014">+420 734 688 014 </a>
<br>
<br>
nebo vyplňte
<br>
<a href="http://www.karelzitny.cz/kontakt/" target="_blank">KONTAKTNÍ FORMULÁŘ.</a>
</div>
You can learn more about using media queries that target certain screen sizes here:
http://en.support.wordpress.com/custom-design/custom-css-media-queries/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Thank you very much. I need to do a mistake somewhere. I have copied the code above you posted to me into the html widget. I am afraid nothing happened has happened on my website…
Do you know where I migt do an error, please? 🙁
Hi there – I don’t see the CSS I provided above anywhere in your child theme’s stylesheet:
http://www.karelzitny.cz/wp-content/themes/writr-child/style.css
You need to add the CSS block there. Let know how it goes.
Hi,
thank you for your feedback. I have changed and it works now!
I am afraid though, I havent insert this code correctly:
@media screen and (min-width: 420px) {
.mobilesOnly {
display: none;
}
}
I had inserted it into the Writr theme and not into the child theme.
Is it correct or I should change the child theme, please?
The original code in child theme is:
/*
Theme Name: Writr Child
Theme URI: http://wordpress:8888
Description: This is a child theme of 2016
Author: Karel Zitny
Author URL: http://karelzitny.cz
Template: writr
Version: 1.0.0
*/
@import url("../writr/style.css");
Thank you for all your support!
I had inserted it into the Writr theme and not into the child theme.
Definitely add it to your child theme. If you change the original theme, your tweaks will be lost and overwritten every time you update the theme to the latest version. That’s the whole reason we use child themes, to prevent that from happening. 🙂
p.s. I’m glad it’s working now and you’re very welcome!
