Making logo responsive (in size) to smart phone screens

bronco7777

When we look at our theme/website on a smart phone the logo looks huge and dominates most of the screen....and we have one of the new Samsung Galaxy 3 android phones that has one of the largest screens available in phones right now. Our logo file size is (2760x658) 72dpi....so we reduced the size now to 300x72 with 72 dpi and it's a little better. But still too large. It's not proportionate with the size of the phone.

Air

Lets try to fix it:-)
Try adding this custom CSS

@media only screen and (max-width: 650px) {
    #logo img{
    max-width: 250px;
    height: auto;
    }
}

And tell me if this better now. I will look on my device when you add it.

With regards.

bronco7777

Air, this helped get the logo to the size we need for it to show on the phone. The logo is now proportionate to a mobile phone screen size.
However, one other thing that is now an issue is the location of the "show info" bar on the top of the page, which also holds all of the social icons.

This bar...on a mobile phone....now appears underneath the logo /header area and it overlaps onto the photo area. I believe you still have our site link to view but I can re-submit if needed

bronco7777

This only happens on the home page. The other pages appear to have the bar above the logo. Also we updated the logo to black and this updated version doesn't appear on the mobile site but does on the computer.

bronco7777

http://gator222.hostgator.com/~virimage/

bronco7777

Just checked the site on Safari (computer) and the home page is not current. It's looking like the mobile with the search bar under logo (logo not updated) and the Show info is incorrect (check the other pages).

Air

There is something weird with your site and it behaviour but I don't know why. Maybe you have installed some cache plugin?
If you didn't make any changes in code of theme files, please get newer version of theme from Themeforest and update it as explained here http://apollo13.eu/docs/hypershot/#!/installation_update_update_theme

For backup you can use http://wordpress.org/extend/plugins/backupwordpress/

This update should fix few issues, and one with 'show info' on small screens.

With regards.

Stewart12

Air, I am having the same issue on my iphone. Are you putting the CSS above in the Style.css file?

Air

Hello,

You can use plugin or child theme to have safe changes. More in here http://apollo13.eu/docs/hypershot/#!/modification_of_theme

With regards.

Stewart12

When I added the Child theme, it worked with resizing the logo on an iPhone, although it changed my menu order around (which is different that what I set it on in Appearance: Menus. How can I change this?

Air

You can always use plugin for custom CSS:-)

But AFAIK changing theme, in this case for child theme, destroys menu for this theme, so you have to revisit Appearance: Menus and make your menu, or return to 'old theme' to get your menu back.

With regards.