Currently, I am working on a responsive design WordPress site and here is the markup:
<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>
As for the CSS part:
.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;
}
When viewing the site at 960 pixels or bigger screens, everything looks good. However, upon resizing the screen, I noticed that the background image for the contact number is not displaying correctly. Even in a smaller screen size like 320x480, the issue persists.
I would greatly appreciate any insights or suggestions on what might be causing this problem. Thank you!