/    Sign up×
Community /Pin to ProfileBookmark

responsive template modification logo, images and margins

Copy linkTweet thisAlerts:
Nov 08.2013

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: [url]http://html5templates.com/heavy-industry[/url] 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

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@httpsterNov 08.2013 — 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.
Copy linkTweet thisAlerts:
@auntniniNov 08.2013 — 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%;

Two of my "responsive" sires are : http://www.josephdenaro.com and http://www.auntnini.com
Copy linkTweet thisAlerts:
@priyankagoundNov 09.2013 — Well.., i think you must follow the below link:

http://html.net/tutorials/css/lesson10.php

It has worked grt for me.

Hiope this helps.
×

Success!

Help @budgey spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...