How to Fix Garbled Text in Mobile Version of the Website - css

Question

I just checked my website via my GalaxyS5 smart phone and noticed the some information garbled on bottom portion of site. It normally looks fantastic on the smart phone but this seems like a big problem to me as most of my visitors are mobile visitors.
Attached are screen shots from my mobile device. Can someone identify the issue with the website?
.art-button-wrapper .art-button
{
font-weight: bold;
font-size: 12px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
text-align: left;
text-decoration: none !important;
color: #FEF200 !important;
width: auto;
outline: none;
border: none;
background: none;
line-height: 31px;
height: 31px;
margin: 0 !important;
padding: 0 19px !important;
overflow: visible;
cursor: default;
z-index: 0;
}
.art-button img, .art-button-wrapper img
{
margin: 0;
vertical-align: middle;
}
.art-button-wrapper
{
vertical-align: middle;
display: inline-block;
position: relative;
height: 31px;
overflow: hidden;
white-space: nowrap;
width: auto;
margin: 0;
padding: 0;
z-index: 0;
}
.firefox2 .art-button-wrapper
{
display: block;
float: left;
}
input, select, textarea, select
{
vertical-align: middle;
font-weight: bold;
font-size: 12px;
}
.art-block select
{
width:96%;
}
.art-button-wrapper.hover .art-button, .art-button:hover
{
color: #FFF200 !important;
text-decoration: none !important;
}
.art-button-wrapper.active .art-button
{
color: #FFF200 !important;
}
.art-button-wrapper .l, .art-button-wrapper .r
{
display: block;
position: absolute;
z-index: -1;
height: 93px;
margin: 0;
padding: 0;
background-image: url('../images/button.png');
}
.art-button-wrapper .l
{
left: 0;
right: 8px;
}
.art-button-wrapper .r
{
width: 409px;
right: 0;
clip: rect(auto, auto, auto, 401px);
}
.art-button-wrapper.hover .l, .art-button-wrapper.hover .r
{
top: -31px;
}
.art-button-wrapper.active .l, .art-button-wrapper.active .r
{
top: -62px;
}
.art-button-wrapper input
{
float: none !important;
}
/* end Button */
/* begin Box, Block, VMenuBlock */
.art-vmenublock
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublock-body
{
position: relative;
z-index: 1;
padding: 0;
}
.art-vmenublock-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublock
{
margin: 7px;
}
/* end Box, Block, VMenuBlock */
/* begin Box, Box, VMenuBlockContent */
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
.art-vmenublockcontent
{
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 1px;
min-height: 1px;
}
.art-vmenublockcontent-body
{
position: relative;
z-index: 1;
padding: 5px;
}
.art-vmenublockcontent-cc
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
}
/* end Box, Box, VMenuBlockContent */