making sure your custom css is reponsive

HI Folks.
I’m using a theme from Elegant themes called “Chameleon” which is responsive but I have made some changes to the font size and style of the site title and to the menu on the home page. My problem is those changes are not responsive so are not showing well on tablets and phones. Here are the two pieces of code that I added, I’m obviously leaving out some addition to make it responsive.

ul#top-menu a { font-size: 18px; font-family: ‘Kreon’, Arial, sans-serif; color: #393939; text-decoration: none; font-weight: normal;float: center;
padding-top: 1px;
}

p#slogan {
float: right;
font-size: 44px;
color: #0d2c70;
text-transform: uppercase;
text-decoration:bold;
text-align:center;
text-shadow: 5px 5px 8px #7a959b;
padding-top:30px;
margin-left: -70px;
margin-top: 27px;
font-family: ‘Kreon’, Arial, sans-serif;
}
#top-menu
{
width:760px;
border-style:solid;
border-width:1px;
text-align: center;
-webkit-border-image:
-webkit-linear-gradient(left, rgba(255,255,255,1) 1%,rgba(0,0,0,1) 50%,rgba(255,255,255,1) 100%) 0 0 100% 0/0 0 5px 0 stretch;

}
#header.tc-header { background: #a6b7ed; }