this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is
.p_phone
.p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call
class and p_phone
were not wrapped properly by textwidget
class. Hence we have to give two different width's, now since textwidget
is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.