Webdesign/coding question

Dev Zone Code
1

Hello!

I know this probably a pretty basic question for any web developers here, but I'm having a really hard time figuring this out
I'm trying to create a responsive website, and failing miserably. On the home page there is a featured image, that should, ideally, resize on different monitors. I can't make this happen. I'm not even sure if this can be done with css.. and I don't really know what i'm looking at when I look at the sites js. (the website I'm working on has already been coded, but the person who wants me to do this is asking me to redo the whole thing based on my design, and with new content)

I feel like a fish out of water, and I don't know why this person has entrusted me with creating their website, but I really do want to learn how to do this.

any advice on this?

here is the link to the code on js fiddle:
http://jsfiddle.net/hakim/Ht6Ym/#&togetherjs=wDRvErdvHh

I couldn't figure out how to get the images uploaded, but the featured image is the second broken link. I just want to be able to make the image resolution change as the window size changes.

if this helps here's a screen shot:

bguimage.png1018x731 461 KB

also, for some reason when i zoomed out to 50% the menu moved to the left :/ ....

any help is appreciated thank you !!

2

There are multiple ways of doing this. Here is a very basic example of changing the font size of an element when the window is resized.

<html>

<body onresize="myFunction()">

	<p id="myElement">Hello</p>
	
	<script>
	function myFunction() {
		var w = window.outerWidth;
		var h = window.outerHeight;
		
		if (w < 800 && h < 800) {
			document.getElementById('myElement').style.fontSize = "50px";
		}
		else {
			document.getElementById('myElement').style.fontSize = "12px";
		}
		
	}
	</script>
</body>

</html>
1 Like
3

You can do this by setting the width of the image to 100%, and the max-width to your desired maximum. And using media-queries to change the font size.

codepen for this: http://codepen.io/anon/pen/NqWJxP

1 Like
4

got it working thank you!

5

just an fyi in case you are interested. There are responsive HTML 5/CSS3 templates available that you can download and modify freely. You can find templates here: http://html5up.net/ among other places.

While these templates might be overly complex for certain applications, I find it helpful to be able to look at potential solutions to problems or reference parts of the templates, cutting out things that aren't needed and modifying portions that I like. I believe that all the templates on the site linked above can be used for personal means and perhaps commercial applications as well. Just throwing this out there.

6

ahh this is amazing actually.. i wish i had known about this earlier. Thank you!