Reputation: 3

Responsive Image scaled Too Big On Mobile

I'm trying to make this landing page responsive: http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/blackfriday-BIG.html

But on mobile the image is now well over the width of the screen when it is in portrait, meaning you have to scroll to view the images and the form. I usually only do the coding for emails and I'm pretty much ripping out my hair at this point. Any help would be appreciated.

  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="HandheldFriendly" content="true">


<style type="text/css">
body          { font-family: Helvetica,Arial,sans-serif }
div           { border: none }
#outer        { width: 100% }
#splashdiv    { float: left }
#formdiv      { float: left; height: 600px; background-color: #000000 }
#pelogo       { padding-bottom: 1em }
.blackbg      { background-color: #000000; text-align: center }
.centre       { text-align: center }
#theform      { display: inline-block; border: 2x solid #ff0000; padding: 1em auto 0px auto;
            background-color: #ffffff; opacity: 1;
            text-align: center }
#thetable     { margin-top: 1.5em }
.prompt       { text-align: right; padding: .4em .25em .4em 1em }
.response     { text-align: left; padding: .4em 1em .4em .25em }
.gobutton     { text-align: center; padding-top: 1em; padding-bottom: 1em }
.redsubmit    { border: 1px solid #ff0080; border-radius: 8px; background-color: #ff0000;
            padding: 2px .5em; color: #ffffff; font-weight: bold; font-size: 200% }

@media only screen and (max-width: 600px) {

img#beast {width: 100%; margin: 0; padding; 0;}}

Here are the other bits

<body>
<div id="outer">
<div id="splashdiv">
  <img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/peep.png" width="690px" id="beast"/>
</div>
<div id="formdiv">
  <div class="blackbg">
    <div id="pelogo">
     <img src="http://www.homeimprovementquotes.co.uk/2016newsletters/Company/landingpages/pebf_sq1.png" width="690px" id="beast"/>
    </div>
    <div>
      <form id="theform" action="http://priceengines.co.uk/cgi-bin/signup" method="post" onsubmit="return check_form()">
        <table id="thetable" border="0">
          <tr>
            <th class="prompt">Contact Name</th>
            <td class="response"><input type="text" name="name" id="name" size="20" placeholder="Contact Name" /></td>
          </tr>
          <tr>
            <th class="prompt">Company Name</th>
            <td class="response"><input type="text" name="compname" id="compname" size="20" placeholder="Company Name" /></td>
          </tr>
          <tr>
            <th class="prompt">Contact Number</th>
            <td class="response"><input type="tel" name="tel" id="tel" size="20" placeholder="Contact Number" /></td>
          </tr>
          <tr>
            <th class="prompt">E-Mail Address</th>
            <td class="response"><input type="email" name="email" id="email" size="20" placeholder="E-mail" /></td>
          </tr>
          <tr>
            <td colspan="2" class="gobutton"><input class="redsubmit" type="submit" name="go" value="Get FREE leads!" /></td>
          </tr>
        </table>
      </form>
    </div>
  </div>
</div>
</div>
</body>

Upvotes: 0