responsive template modification logo, images and margins

budgey

I'm not a complete newbie with html but with this responsive html5 and css3 I may as well be. I'm looking for some input or at least keywords on how to modify some of the things I'm having difficultly with. I'm knowledgeable enough with web dev to handle most of this but just need some pointers. If I don't know the proper terminology I'll never get the google results I need.
This may be more of a CSS3 issue so maybe I should post this in the css forum.

I'm working modifying this template: http://html5templates.com/heavy-industry for a specific business. I've replaced the original "Heavy Industry.. " text logo in the header with a logo image but can't get it to position like I want. The logo also doesn't resize for the phone.
It appears to have a large top margin that won't let the logo be any bigger or go any higher than the top of the menu buttons. If I make the logo any bigger it starts disappearing underneath the wrapper below the header underneath the gray.

Any advise is greatly appreciated. Don't expect to be spoon fed. I'll post some screenshots somewhere if needed.

Thanks,
budgey

httpster

Could you be a little more specific with what you're looking to do?

It looks like your website isn't responsive at all, so making the whole thing responsive is a pretty large project. I can help, but let's take it one step at a time!

On a larger scheme, you could look into translating the theme over to twitter bootstrap. That would make it easier in the long run but would take some time setting it up properly.

The other way to make things responsive is to use percentages for widths and heights, etc and also using @media queries. You can read up a bit on some stuff here http://css-tricks.com/css-media-queries/

Let me know your specific questions and i'll help out.

auntnini

I did not checkout the template CSS; nor did I try to analyze your speciific issues. As you probably realize, the "responsive" trick for resizing is percentage % units of measurement -- width: 95%; min-width: 50px; max-width: 400px; padding: 0.1%;