Responsive design is showing different in different size screens

Question

I am doing a wordpress site in responsive design. Now I have my markup is like this

<div class="contact-wrap">
  <div class="contact-number">123-456-7890</div><!--.contact-number-->
  <div class="user-login"><a href="#"><span class="login-icon">Login</span></a></div><!--.user-login-->
</div>

and css is like this

.contact-wrap {
  padding: 0;
  margin: 25px 0 0 0;
  overflow: hidden;
}
.contact-wrap .contact-number {
  background-image: url('images/contact-icon.png');
  background-position: 0 7px;
  background-repeat: no-repeat;
  color: #d4001a;
  font-size: 22px;
  font-weight: bold;
  padding: 0 0 0 24px;
  float: left;
}
.contact-wrap .user-login {
  padding: 4px 0 0 0;
  float: right;
}
.user-login a {
  background-image: url('images/login-bg-sprited.png');
  background-position: 0 -27px;
  background-repeat: no-repeat;
  padding: ;
  width: 62px;
  height: 27px;
  display:inline-block;
  padding: 0 0 0 4px;
}

Now as the site will be in responsive it is looking with 960 pixel and also with bigger screen but when I am resizing the screen the background image for contact number is not is not coming good. Here is the screen shot for bigger screen.

Here is the screen size for 320X480.

So can someone kindly tell me what is the wrong here. Any help and suggestions will be highly appreciable.

Answer 1

您可以在div上做一个负的margin-top-登录

Answer 2

I tested the code you posted and it is working fine in all desktop browsers, even IE

Your problem is somewhere around the code you posted, probably some inherited style. There is a couple of things you can try:

change selector .contact-wrap .contact-number to simply .contact-number

change < div class="contact-number">123-456-7890</ div > to < span class="contact-number">123-456-7890</ span >

Answer 3

我遍历了代码，它在不同大小的设备上都可以正常工作，它的问题与否定值和其他继承的类提供的某些margin属性有关。