Cross-browser compatability width issue

Question

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:

Thanks for the help!

Answer 1

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.

Cross-browser compatability width issue

Sign up