title: Resizing image within a div when browser site is reduced
body: <p>When I reduce the size of the browser window I want the image contained in the div to resize and remain inside the box. I have tried using the position property but this has broken my layout.</p>
  
  <p>In addition, the hyperlink at the top right of the page is currently set to black which is determined by the global in CSS. How do I define another element to be different colored. </p>
  
  <p>Many Thanks </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    font: 100%/1.5 Arial, Helvetica,sans-serif;
    padding:0;
    margin:0;
    background-color:white;
  }
  
  
  /* Style the list 'container'  */
  ul.topnav {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
  }
  
  /* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
  ul.topnav li {
    float: left;
  }
  
  /* style the links  */
  ul.topnav li a {
   display: inline-block;
   color: white;
   text-align: center;
  
   text-decoration: none;
   transition: 0.3s;
   font-size: 100%;
  }
  
  /* hover */
  ul.topnav li a:hover {
  color: gold;
  }
  
  
  /* Hide the icon initially  */
  ul.topnav li.icon {display: none;}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Global */
  .container{
    width:60%;
    margin:auto;
    overflow:hidden;
    /* Allows the burger nav and branding to sit on the same line */
  
  
  }
  
  a{
    text-decoration: none;
    text-shadow: 50px;
    color: black;
  }
  
  a #class{
    color: red;
  
  }
  
  
  
  ul{
    margin:0;
    padding:0;
  }
  
  .subscribe{
    height:38px;
    background:gold;
    border:0;
    padding-left: 20px;
    padding-right:20px;
    color:black;
  }
  
  .dark{
    padding:25px;
    background:#35424a;
    color:white;
    margin-top:10px;
    margin-bottom:10px;
  }
  
  
  .maps {
          position: relative;
          padding-bottom: 75%; // This is the aspect ratio
          height: 0;
          overflow: hidden;
  }
  .maps iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100% !important;
          height: 100% !important;
      }
  
  
  
  
  
  
  
  
  
  /* Header **/
  header{
    background:#35424a;
    color:white;
    padding-top:30px;
    min-height:70px;
    border-bottom:gold 5px solid;
  }
  
  header a{
    color:#ffffff;
    text-decoration:none;
    text-transform: uppercase;
    font-size:100%;
  }
  
  header li{
    float:left;
    display:inline;
    padding: 0 20px 0 20px;
  }
  
  header #branding{
    float:left;
  }
  
  header #branding h1{
    margin:0;
  }
  
  header nav{
    float:right;
    margin-top:10px;
  }
  
  header .highlight{
    color:gold;
  }
  
  header a:hover{
    color:gold;
  }
  
  h3 .bronze{
    color:#cc6633;
  
  }
  
  h3 .silver{
    color:silver;
  
  }
  
  h3 .gold{
    color:gold;
  
  }
  
  
  
  
  
  
  /* Showcase */
  #showcase{
    min-height:400px;
    color:black;
  }
  
  #showcase h1{
    margin-top:50px;
    font-size:300%;
    margin-bottom:10px;
  }
  
  #showcase p{
    font-size:120%;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Newsletter */
  #newsletter{
    padding:15px;
    color:#ffffff;
    background:#35424a
  }
  
  #newsletter h1{
    float:left;
  }
  
  #newsletter form {
    float:right;
    margin-top:15px;
  }
  
  #newsletter input[type="email"]{
    padding:4px;
    height:26px;
    width:250px;
  }
  
  
  
  /* Sidebar */
  aside#sidebar{
    float:right;
    width:25%;
    margin-top:10px;
  }
  
  aside#sidebar .quote input, aside#sidebar .quote textarea{
    width:90%;
    padding:5px;
  }
  
  
  
  
  
  /* Main-col */
  article#main-col{
    float:left;
    width:70%;
  }
  
  
  
  
  
  
  
  
  
  
  /* Imagery */
  
  #social {
    margin-top: 10%; 
      text-align: center;
      font-size: 150%;
      color: black;
  }
  
  #imagery {
    margin-top: 5%;
    margin-bottom: 5%;
  }
  
  #imagery .box {
  float: right;
  text-align: center;
  width: 30%;
  padding:10px;
  
  }
  
  #imagery .box i{
    font-size: 700%;
  }
  
  /* Create four equal columns that floats next to each other */
  .column {
      float: left;
      width: 20%;
      padding: 10px;
  
  }
  
  .column img {
      margin-top: 12px;
      width: 100%;
  }
  
  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
  
  .container .visuals{
    float: right;
  }
  
  .container .callus{
    float: right
  
  }
  
  #callus{
  
  }
  
  
  
  
  
  
  
  /* Services */
  ul#services li{
    list-style: none;
    padding:20px;
    border: #cccccc solid 1px;
    margin-bottom:5px;
    background:#35424a;
    color: white;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  footer{
    padding:20px;
    margin-top:20px;
    color:black;
    background-color:gold;
    text-align: center;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /* Media Queries */
  @media(max-width: 768px){
    header #branding,
    header nav,
    header nav li,
    #newsletter h1,
    #newsletter form,
    #boxes .box,
    article#main-col,
    aside#sidebar{
      float:none;
      text-align:center;
      width:100%;
    }
  
    header{
      padding-bottom:20px;
    }
  
    #imagery{
      font-size: 50%;
      float: none;
    }
  
  
  
  
    #showcase h1{
      margin-top:40px;
    }
  
    #newsletter button, .quote button{
      display:block;
      width:100%;
    }
  
    #newsletter form input[type="email"], .quote input, .quote textarea{
      width:100%;
      margin-bottom:5px;
    }
  
  
  
  
  
  
    /* nav */
   ul.topnav li {
    display: none;
  }
  
  ul.topnav li.icon {
   display: inline-block;
   }
  
  
  ul.topnav.responsive {position: relative;}
   ul.topnav.responsive li.icon {
   position: absolute;
   right: 0;
   top: 0;
   }
   ul.topnav.responsive li {
   float: none;   /*  'un' float the list items so they return to displaying vertically */
   display: inline;
   }
   ul.topnav.responsive li a {
   display: block;
   text-align: left;
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;DB Plumbing | About&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;script src="https://use.fontawesome.com/3a2264e344.js"&gt;&lt;/script&gt;
    &lt;script src="html9shiv.js"&gt;&lt;/script&gt;
    &lt;link rel="shortcut icon" type="image/png" href="wrench.png"/&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"&gt;
    &lt;meta name="desciption" content = "Darran Brady Plumbing"&gt;
    &lt;meta name="keywords" content = "Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham "&gt;
    &lt;meta name = "author" content ="DB, Darran, Brady, Darran Brady"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;script&gt;
  function myFunction() {
   var x = document.getElementById("myTopnav");
   if (x.className === "topnav") {
   x.className += " responsive";
   } else {
   x.className = "topnav";
   }
  }
  &lt;/script&gt;
  &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;div class="container"&gt;
          &lt;div id="branding"&gt;
            &lt;h1&gt;&lt;span class="highlight"&gt;DB&lt;/span&gt; Plumbing&lt;/h1&gt;
          &lt;/div&gt;
          &lt;nav&gt;
            &lt;ul class="topnav" id="myTopnav"&gt;
              &lt;li class="active"&gt;&lt;a href="home9.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="about9.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="services9.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="coverage9.html"&gt;Coverage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact9.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="icon"&gt;
   &lt;a href="javascript:void(0);" style="font-size:200%;" onclick="myFunction()"&gt;☰&lt;/a&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;/div&gt;
          &lt;/header&gt;
  
  &lt;div class="container"&gt;
        &lt;div class="dark"&gt;
              &lt;div class="callus"&gt;&lt;a href="tel:+07756848657"&gt;&lt;i class="fa fa-phone fa-2x" &gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
   &lt;h2&gt;Our Story | Our Family&lt;/h2&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
  &lt;section id="main"&gt;
        &lt;div class="container"&gt;
  
          &lt;article id="main-col"&gt;
            &lt;p&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius auctor lacus nec feugiat. Phasellus sit amet ex ipsum. Praesent pharetra tincidunt tempor. Etiam velit eros, dapibus eget porta in, lacinia et magna. Nam eget eros non orci consectetur congue at ac augue. Proin eget arcu in enim feugiat ultricies. Curabitur maximus metus nec metus pretium viverra at et orci. Integer hendrerit ante ut placerat cursus.
            &lt;/p&gt;
            &lt;p class="dark"&gt;
  Aliquam eget pharetra diam. Nulla placerat lorem at turpis tempor, vel ultrices dui tincidunt. Proin quis egestas lorem. Mauris vehicula lectus odio, sit amet dictum justo feugiat a. Praesent id dictum lacus. Sed ullamcorper id erat ut dictum. Fusce porttitor lorem sapien, in aliquet sapien convallis et. Donec nec mauris nulla. Curabitur cursus semper odio, et hendrerit ante. Nunc at cursus ante. Maecenas gravida ligula ut efficitur suscipit. Nulla id turpis varius, pretium nunc sed, fermentum sem. Sed lacinia nunc non interdum pellentesque.
            &lt;/p&gt;
          &lt;/article&gt;
  
          &lt;aside id="sidebar"&gt;
            &lt;div class="dark"&gt;
             &lt;a href="http://www.checkatrade.com/DBPlumbing/Reviews.aspx"&gt;&lt;img src="cat.png" alt="checkatradelogo"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/aside&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  
  
  
   &lt;footer&gt;
        &lt;p&gt;Darren Brady Plumbing Copyright &amp;copy; 2017&lt;/p&gt;
      &lt;/footer&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*css reset
  * {
  
  
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  
  /* HTML5 display-role reset for older browsers 
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  
  body {
    line-height: 1;
    background-image: url("bg.jpg");
    background-size: cover;  /*this seems better*/
    /*background-size: contain;
  
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  /* end reset */</code></pre>
  </div>
  </div>
  </p>