Hi, I bought the elegance responsive template and love it! I have created my site and I have my own images that I have used on the site. The problem is my logo image just won't resize for the mobile website. I can't see the entire logo on the top on my phone.

I have been tinkering with the CSS and tried adjusting the values for height and max-width. I tried adding in Left and Right as a background-position. Nothing I change helps present that image any better on the mobile site. ANY HELP is appreciated. My website is blackpawproperties.com


The default css source:

#logoTxt {
background-image: url(../images/logo_img.png);
background-repeat: no-repeat;
background-position: center;
max-width: 100%; /*381px;*/
height: 49px;
border: none;
padding-bottom: 90px;
}

So I changed it a little. It's better but the mobile image is a little small:

#logoTxt {
background-image: url(../images/logo_img.png);
background-repeat: no-repeat;
/* background-position: center; */
background-size: contain;
/* max-width: 100%; */
/*381px;*/
height: 49px;
border: none;
padding-bottom: 90px;

It is a little small on my android, but still looks good. A little zoom on my part and I have no trouble reading it. I'm not really a coder, but I thought I'd chime in and tell you I could live with that! Nice looking web site by the way

Hold on though, one of the coders should be along any minute to help you out.

I think it looks pretty good.

I agree it is a little small but it is responsive which I think is good enough for me. After doing some research on CSS the line that made the difference was adding this to the image's code in the CSS:

background-size: contain;

Thanks everyone!

BTW Eric the logo is actually my dog. Since you are a dog lover I thought you might want to know that the company name is built off of my love for bordie collie/lab mixes.

Try saying BlackPawProperties when you've had a few It looks fine on the laptop and on and Android 7in tablet.

Black Paw,
If you would use text and and a separate logo img instead of one big background image, you could assign classes and/or IDs for your header elements*, giving you more control over the size and positioning to keep things readable at even the smallest screen size.

This would let you set a min-width on the actual logo, as well as creating a phone number link, so users could tap the number to call (depending on their phone/device).
(The email address could be confusing for some since it can't be clicked or copy/pasted.)

*<h1>, <h2>, <div id="mylogo">...........
Using actual text in your header would also give search engines something to latch onto. As it is – one big image with no alt text, it's the same as a big blank space to Google, etc. – people who rely on screen readers or have images turned off won't see anything there either.

I love that template, too. Looks good!