Is there a way to change a word in a line of text depending on the screen size?

 

On desktop I'd like the line:

 

Click here to register by filling out a parish census form

 

but on phones and tablets I'd like

 

Tap here to download a copy of the parish census form

 

I've put that together, but it's not working for me (the div is empty)

<a href="images/index/census2010.pdf" target="_blank">
<div class="welcome">
<div class="welcomenewparishioners">
<div class="registercensus"></div>
</div>
</div><!-- welcome --></a>

.registercensus {
	font-size: 22px;
	letter-spacing: 3px;
	content: "Click here to register by filling out a parish census form";
}

	.registercensus {
		text-align: center;
		font-size: 7vw;
		line-height: 7vw;
		content:"Tap here to download a copy of the parish census form";
	}

You can't download a form on an iphone. So why not change this to 'enter your email address to get a copy of the census form'.

 

Or better still, put the form on the site.

 

 

You can't download a form on an iphone

 

Didn't realise that.

 

I have other cases where I'd like the wording to change, for instance

 

 

Hover over / tap an area of the map to learn more about it.

Keep it simple:

Select an area of the map to learn more about it.

You can do what you want by writing both texts in the html, giving them each a selection class (with <span> if necessary) and using display: none; in your css under media queries on the text you don't want to see.

I only have a couple of instances where I feel the text should change so I'll try out TimW's method, thanks.