CODEWITHSUNDEEP
htmlcssresponsive-designcross-browser
Devon
Devon

Reputation: 131

Cross-browser compatibility 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_phoneand .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

Upvotes: 0

Views: 106

Answers (2)

hitesh_noty
hitesh_noty

Reputation: 385

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.

Upvotes: 1

coderodour
coderodour

Reputation: 1057

Try to add this to your styling block for .p_phone a:

white-space: nowrap;

Upvotes: 1

Related Questions