I need to hide text in mobiles/tablets

Hello guys,

Can someone please give me some help?

I have this code:

<div class="blkb"><i class="vidbi"></i> Latest <?php the_title(); ?> Videos <div class="barpa fto"> <?php //some code here ?></div></div>

PHP:

Result:

Now I want to hide TITLE from mobiles/tablets...

So what I did was:

<style type="text/css">
@media screen and (max-width: 880px) {
.hidetitle {
display:none;
overflow:hidden;
}
}
</style>

<div class="blkb"><i class="vidbi"></i> Latest <div class="hidetitle"><?php the_title(); ?></div> Videos <div class="barpa fto"> <?php //some code here?></div></div>

PHP:

Is working fine, but... the problem is that the text doesn't appear in one line like before.

The result is showing like this:

And I want to show:

What I'm doing wrong?

Help

Thanks in advance!

 

<style type="text/css">
.hidetitle {
display: inline-block;
}
@media screen and (max-width: 880px) {
.hidetitle {
display:none;
overflow:hidden;
}
}
</style>

Code (markup):

 

That's it!! I totally forgot about display: inline-block;

Thank you my friend