Lifestyle Pro site header image responsive sizing issue &

[Rita]

Working on a site and we had issues with the header logo. So we uploaded an image into the site header that had a logo in it. Unfortunately, it's not completely responsive. The image looks fine on the iPad, but not on the iPhone

This is the code we used to insert an image into the site header

.site-header {
background-color: #fff;
background-image:url('http://75.103.92.60/wp/wp-content/uploads/2014/02/Header1_with_logo.jpg');
background-repeat:no-repeat;
background-position: center;
height: 300px;
padding: 48px;
padding: 4.8rem;
overflow: hidden;
}

So then we tried this for the responsive piece but with only the logo:

@media only screen and (max-width: 240px) {
.site-header {
background-color: #fff;
background-image:url('http://75.103.92.60/wp/wp-content/uploads/2014/03/logo_clear1-240.png');
height: 67px;
width: 240px;
}

Need some help. Site is http://mothersandmore.org

http://mothersandmore.org

[Ben Siegfried]

iphone is 320px for the vertical and 480px for the horizontal:


@media only screen and (max-width: 320px) {
}


[Rita]

Thanks.

[Author]

Posts