Zaeo Zaeo - 5 months ago 19
HTML Question

Cross-browser compatability width issue

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
and
.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;
}


Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.

.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;
}


Increasing the width to 150px fixes it, but it is then too wide for the image.

How it needs to be:
enter image description here

Thanks for the help!

Answer

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.

Comments