Tagline Display – Getting it right on a screen and mobile

Hi !

Here’s a link to the project I am working on.

I have added in a tagline div based on a thread here at the forum using the functions.php in the child theme folder.

add_action( 'ava_main_header', 'enfold_customization_add_tagline' );
function enfold_customization_add_tagline() {
	echo '<div class = "tagline">'.get_bloginfo ( 'description' ).'</div>';
}

And the corresponding css style in the quick css box in General Styling is:

.tagline {
margin: 10px;
position: absolute;
top: 190px; right: 200px;
z-index: 1000;
color: #666666; 
}

However, when accessed through a mobile the tagline doesnt disappear and it just remains there, eventhough I have added the following code in custom.css (copied from the main theme into the child theme folder):

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .tagline {
  display: none;
  }
}

Ideally I would like to re-adjust the logo and the tagline in a mobile display too, similar to how it appears on a computer screen (since it looks awful on mobile), but no matter what I do it just doesnt display. Tried SHIFT+F5 as well and that also doesn’t seem to work.

Any help would be appreciated it.