Problems!

I have 2 current issues with our website at the moment. This page shows both of them in action and I know they are related. 

 

  1. The header image (above) does not resize properly on pages when the browser window is resized. It should meet the top markdown block as on the index pages. On standardpages you can see the white space around the header image which changes as the window resizes.
    To make the header image resize proportionally, I have added some code to the Custom CSS. I know that this is causing issue 2:
  2. Galleries (such as below) are also being affected by the code I'm using to make the headers proportional. Notice how stretched the images are. This is only really noticable on a screen wider than 1400px.
    If I remove the CSS I have used for the header, this problem is fixed. It seems to be affecting all of the #slide divs.

 

I am sure that the resolution to both problems will be to correct how I am making the banner image proportional. This is, however, beyond my CSS skill. The custom CSS I have so far is:

(code for the header in italics)

 

.twitter-block .tweet-list {
   background-color: #1a9bfc;
  padding: 10px;
}

#headerNav nav .subnav
{
  background-color: #199bfb;
}

#preFooter { display: none; }

#sidecarNav nav {
    padding: 24px 36px 72px;
    background-color: #199bfb;
}

.entry-title {
    margin: 12px 0;
    text-align:left;
}

.collection-type-index .page-content {
    padding: 00px 00px 00px 00px !important;
}


.promoted-gallery-wrapper{width: 100%}
 div.promoted-gallery-wrapper.promoted-full,  
 div.slide,  {  
   height:59vw; 
 }
 .sqs-gallery-block-slideshow{
     height:59vw !important;
 }

 


#page{
  padding-top: 0px;
}

#footer { padding-bottom: 0;} .footer-inner { padding: 0px 0px; padding-bottom: 0;}

 .form-block { margin-left: 40px; margin-right: 40px;
 /* block background color */  
 /* text color */ color: #47494b; 
 }
 .form-wrapper input[type="submit"] {
   background-color: #ff0000;
 }

.H3white {
  color: #ffffff;
  font-size:18px;
  font-weight:400;
  text-align: center;
}

.H2white {
  color: #ffffff;
  font-size:32px;
    font-weight:400;
  text-align: center;
}

.H1white {
  color: #ffffff;
  font-size:42px;
    font-weight:400;
  text-align: center;
}

.bodywhite {
  color: #47494b;
  font-size:14px;
    font-weight:400;
    text-indent:00px;
}


#centerheader{
    margin: 0 auto -2em;
    width: 50%;
    position: relative;
    overflow: hidden;
  color: white;
  text-align:center;
}

a {

  font-weight: 900;
}