title: HTML Coding to fit screen and image mapping
body: <p>I'm making a really simple website, just to practice, since I plan on going into this field.
  I have a 27" desktop monitor, and the website looks great on it. When I checked it on my brother's laptop, 19", it looked awful because the width did not fit the screen. So I changed the code and put width="100%" . While the page looked good on each computer monitor, the links were not clickable. I figured this was due to the Image Mapping that I had added to the code.</p>
  
  <p>Since I am fairly new to HTML coding, I was hoping to get some help on this site from someone who knows what they are doing. </p>
  
  <p>MY QUESTION: How do I change my code to fit all screen sizes as well as not changing the Image Mapping to make the links clickable. Here is my code:</p>
  
  <pre><code>&lt;center&gt; 
  
  &lt;font face="verdana" size="1" color="black"&gt; 
  
  &lt;img src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/googlefrive.jpg" width="100%" usemap="#ImageMap1"&gt; 
  
  
  &lt;div id="inlineframe" style="width:1274px; height:944px; position:absolute; left:289px; top:203px; z-index:1; overflow:auto;" usemap="#ImageMap1"&gt; 
  &lt;iframe src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/index.html" name="inlineframe" width=100% height=100% border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"&gt;&lt;/iframe&gt; 
  
  &lt;map id="ImageMap1" name="ImageMap1"&gt;
  &lt;area shape="rect"  coords="54,216,261,338" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/info.html" target="inlineframe" /&gt;
  &lt;area shape="rect" coords="44,553,264,678" href="" target="inlineframe" /&gt;
  &lt;area shape="rect" coords="41,961,261,1084" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/specialmessage.html" target="inlineframe" /&gt;
  &lt;/map&gt;
  
  &lt;/font&gt; 
  &lt;/center&gt;
  </code></pre>