One thread to rule them all (all of my questions)

by jbearnolimits
Posted: 10 years ago 3 replies
WEB DESIGN
Ok, so I know I have probably annoyed most people in this section of the forum with my many threads. So I am going to post this one and I plan to let it hold all of my questions. Savvy?

Here is my test page: An Online Church Ministry - Growing Christians - Reaching The Lost

As you can see I have done a lot. I am trying to make it responsive as best I can. So I am working in my main css file to do that. I am having trouble getting a good layout for smaller screens. In fact, if you take a look and resize the screen you can see that the mission statement box jumps around between two sizes. I don't know why.

So if someone could help me get this layout looking good that would be great. I could stop bugging everyone then. Here is the css:
Code:
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
  padding: 0;
  font-family: Georgia;
  
  font-size: 12pt;
}
h1 {
  font-family: Tahoma;
  font-weight: bold;
  
  font-size: 19pt;
  
  color: #003399;
}
h2 {
  font-family: tahoma;
  
  font-size: 15pt;
  
  font-weight: bold;
  
  color: #003399;
}
scriptureref {
  font-family: Georgia;
  
  font-size: 12pt;
  
  font-weight: bold;
}
scripture {
  font-family: Georgia;
  
  font-size: 12pt;
}
 @media only screen and (min-width: 985px) {
/* General Settings for screens with 985px and up
-----------------------------------------------------------
-----------------------------------------*/
#headercontainer {
  width: 100%;
  background-color: #86bde4;
  float: left;
}
#headercontent {
  width: 100%;
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  width: 100%;
  max-width: 300px;
  height: auto;
}
#searchbar {
  float: left;
  width: 100%;
  max-width: 300px;
}
#headerright {
  float: left;
  max-width: 669px;
  width: 100%;
  height: auto;
  padding-left: 15px ;
}
#missionstatement {
  padding: 20px 10px 10px ;
  width: 100%;
  max-width: 324px;
  float: right;
  height: auto;
}
#headerlogo {
  width: 100%;
  max-width: 246px;
  height: auto;
  float: left;
}
#bodycontainer {
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#bodycontent {
  max-width: 984px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #FFFFFF;
}
#bodyleft {
  float: left;
  max-width: 658px;
  width: 100%;
  height: auto;
  padding: 15px ;
}
#bodyright {
  float: left;
  width: 100%;
  max-width: 266px;
  height: auto;
  padding: 15px ;
}
.twocolumninsidecontent {
  width: 100% ;
}
.twocolumnscontent {
  width: 100% ;
}
.twocolumnscolumnleft {
  float: left;
  max-width: 175px;
  margin-left: 15px;
  width: 100%;
  clear: left;
}
.twocolumnscolumnright {
  height: auto;
  width: 100%;
  max-width: 453px;
  margin-left: 15px;
  float: left;
}
.CheckMarks {
  width: 100%;
  max-width: 40px;
  height: auto;
  float: left;
}
.seconddivafterbreak {
  width: 100% ;
  clear: both ;
}
#footercontainer {
  float: left ;
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#footercontent {
  width: 100%;
  max-width: 954px;
  margin-right: auto;
  margin-left: auto;
  background-color: #D5D5DB;
  text-align: center;
  padding: 15px ;
}
#navbarcontainer {
  background-color: #86bde4;
  background-image: url(../images/topbackgroundsmall.jpg);
  background-position: left bottom;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  text-align: center;
  clear: both;
  background-repeat: repeat-x;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 984px;
  text-align: center;
  clear: both;
  display: inline ;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 100%;  
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  max-width: 639px;
  width: 100%;
  float: left;
  height: auto;
}
.BannerColumn2 {
  width: 100%;
  max-width: 345px;
  float: left;
  height: auto;
}
img {
  border-style: solid;
  border-width: 0px;
  width: 100%;
  height: auto;
}
.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
#tswcsstabs ul {
 margin-top: 10px;
 padding: 0px ;
 list-style: none ;
 display: inline-block ;
}
#tswcsstabs ul li {
        margin: 0 ;
 padding: 0 ;
 display: inline-block ;
 text-align: center ;
 list-style: none ;
 font-family: Arial, Helvetica, sans-serif ;
}
#tswcsstabs li a {
 color: #ffffff ;
 background-color: #003399 ;
 border: 1px outset #ffffff ;
 padding: 8px ;
 text-decoration: none ;
 display: inline-block ;
}
#tswcsstabs li a:hover {
 color: #ffffff ;
 background-color: #adccca ;
        display: inline-block ;
}
.jcarousel-wrapper {
    margin: 0;
    position: relative;
    border: 0px solid #fff;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    -webkit-box-shadow: 0 0 0px #999;
       -moz-box-shadow: 0 0 0px #999;
            box-shadow: 0 0 0px #999;
}

.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
    color: #fff;
}
/** Carousel **/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 639px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    width: 30px;
    max-width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
    left: 5px;
}
.jcarousel-control-next {
    right: 5px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
    position: absolute;
    bottom: 5px;
    left: 10%;
    -webkit-transform: translate(-20%, 0);
    -ms-transform: translate(-20%, 0);
    transform: translate(-20%, 0);
    margin: 0;
}
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}
.slideitem {
  display: block;
  width: 100%;
  max-width: 639px;
  height: auto !important;
}
}
 @media only screen and (max-width: 984px) and (min-width: 
601px) {
/* General Settings for screens 601px to 984px
-----------------------------------------------------------
-----------------------------------------*/
#headercontainer {
  width: 100%;
  background-color: #86bde4;
  float: left;
}
#headercontent {
  width: 100%;
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  width: 100%;
  max-width: 300px;
  height: auto;
}
#searchbar {
  float: left;
  width: 100%;
  max-width: 300px;
}
#headerright {
  float: left;
  max-width: 669px;
  width: 100%;
  height: auto;
  padding-left: 15px ;
}
#missionstatement {
  padding: 20px 10px 10px ;
  width: 100%;
  max-width: 324px;
  float: left;
  height: auto;
}
#headerlogo {
  width: 100%;
  max-width: 246px;
  height: auto;
  float: left;
}
#bodycontainer {
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#bodycontent {
  max-width: 984px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #FFFFFF;
}
#bodyleft {
  float: left;
  max-width: 658px;
  width: 100%;
  height: auto;
  padding: 15px ;
}
#bodyright {
  float: left;
  width: 100%;
  max-width: 266px;
  height: auto;
  padding: 15px ;
}
.twocolumninsidecontent {
  width: 100% ;
}
.twocolumnscontent {
  width: 100% ;
}
.twocolumnscolumnleft {
  float: left;
  max-width: 175px;
  margin-left: 15px;
  width: 100%;
  clear: left;
}
.twocolumnscolumnright {
  height: auto;
  width: 100%;
  max-width: 453px;
  margin-left: 15px;
  float: left;
}
.CheckMarks {
  width: 100%;
  max-width: 40px;
  height: auto;
  float: left;
}
.seconddivafterbreak {
  width: 100% ;
  clear: both ;
}
#footercontainer {
  float: left ;
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#footercontent {
  width: 100%;
  max-width: 954px;
  margin-right: auto;
  margin-left: auto;
  background-color: #D5D5DB;
  text-align: center;
  padding: 15px ;
}
#navbarcontainer {
  background-color: #86bde4;
  background-image: url(../images/topbackgroundsmall.jpg);
  background-position: left bottom;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  text-align: center;
  clear: both;
  background-repeat: repeat-x;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 984px;
  text-align: center;
  clear: both;
  display: inline ;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 100%;  
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  max-width: 639px;
  width: 100%;
  float: left;
  height: auto;
}
.BannerColumn2 {
  width: 100%;
  max-width: 345px;
  float: left;
  height: auto;
}
img {
  border-style: solid;
  border-width: 0px;
  width: 100%;
  height: auto;
}
.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
#tswcsstabs ul {
 margin-top: 10px;
 padding: 0px ;
 list-style: none ;
 display: inline-block ;
}
#tswcsstabs ul li {
        margin: 0 ;
 padding: 0 ;
 display: inline-block ;
 text-align: center ;
 list-style: none ;
 font-family: Arial, Helvetica, sans-serif ;
}
#tswcsstabs li a {
 color: #ffffff ;
 background-color: #003399 ;
 border: 1px outset #ffffff ;
 padding: 8px ;
 text-decoration: none ;
 display: inline-block ;
}
#tswcsstabs li a:hover {
 color: #ffffff ;
 background-color: #adccca ;
        display: inline-block ;
}
.jcarousel-wrapper {
    margin: 0;
    position: relative;
    border: 0px solid #fff;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    -webkit-box-shadow: 0 0 0px #999;
       -moz-box-shadow: 0 0 0px #999;
            box-shadow: 0 0 0px #999;
}

.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
    color: #fff;
}
/** Carousel **/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 639px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    width: 30px;
    max-width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
    left: 5px;
}
.jcarousel-control-next {
    right: 5px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
    position: absolute;
    bottom: 5px;
    left: 10%;
    -webkit-transform: translate(-20%, 0);
    -ms-transform: translate(-20%, 0);
    transform: translate(-20%, 0);
    margin: 0;
}
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}
.slideitem {
  display: block;
  width: 100%;
  max-width: 639px;
  height: auto !important;
}
}
 @media only screen and (max-width: 600px) and (min-width: 
401px) {
/* General Settings for screens between 401px and 600px
-----------------------------------------------------------
-----------------------------------------*/
#headercontainer {
  width: 100%;
  background-color: #86bde4;
  float: left;
}
#headercontent {
  width: 100%;
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  width: 100%;
  max-width: 300px;
  height: auto;
}
#searchbar {
  float: left;
  width: 100%;
  max-width: 300px;
}
#headerright {
  float: left;
  max-width: 669px;
  width: 100%;
  height: auto;
  padding-left: 15px ;
}
#missionstatement {
  padding: 20px 10px 10px ;
  width: 100%;
  max-width: 324px;
  float: left;
  height: auto;
}
#headerlogo {
  width: 100%;
  max-width: 246px;
  height: auto;
  float: left;
}
#bodycontainer {
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#bodycontent {
  max-width: 984px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #FFFFFF;
}
#bodyleft {
  float: left;
  max-width: 658px;
  width: 100%;
  height: auto;
  padding: 15px ;
}
#bodyright {
  float: left;
  width: 100%;
  max-width: 266px;
  height: auto;
  padding: 15px ;
}
.twocolumninsidecontent {
  width: 100% ;
}
.twocolumnscontent {
  width: 100% ;
}
.twocolumnscolumnleft {
  float: left;
  max-width: 175px;
  margin-left: 15px;
  width: 100%;
  clear: left;
}
.twocolumnscolumnright {
  height: auto;
  width: 100%;
  max-width: 453px;
  margin-left: 15px;
  float: left;
}
.CheckMarks {
  width: 100%;
  max-width: 40px;
  height: auto;
  float: left;
}
.seconddivafterbreak {
  width: 100% ;
  clear: both ;
}
#footercontainer {
  float: left ;
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#footercontent {
  width: 100%;
  max-width: 954px;
  margin-right: auto;
  margin-left: auto;
  background-color: #D5D5DB;
  text-align: center;
  padding: 15px ;
}
#navbarcontainer {
  background-color: #86bde4;
  background-image: url(../images/topbackgroundsmall.jpg);
  background-position: left bottom;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  text-align: center;
  clear: both;
  background-repeat: repeat-x;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 984px;
  text-align: center;
  clear: both;
  display: inline ;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 100%;  
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  max-width: 639px;
  width: 100%;
  float: left;
  height: auto;
}
.BannerColumn2 {
  width: 100%;
  max-width: 345px;
  float: left;
  height: auto;
}
img {
  border-style: solid;
  border-width: 0px;
  width: 100%;
  height: auto;
}
.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
#tswcsstabs ul {
 margin-top: 10px;
 padding: 0px ;
 list-style: none ;
 display: inline-block ;
}
#tswcsstabs ul li {
        margin: 0 ;
 padding: 0 ;
 display: inline-block ;
 text-align: center ;
 list-style: none ;
 font-family: Arial, Helvetica, sans-serif ;
}
#tswcsstabs li a {
 color: #ffffff ;
 background-color: #003399 ;
 border: 1px outset #ffffff ;
 padding: 8px ;
 text-decoration: none ;
 display: inline-block ;
}
#tswcsstabs li a:hover {
 color: #ffffff ;
 background-color: #adccca ;
        display: inline-block ;
}
.jcarousel-wrapper {
    margin: 0;
    position: relative;
    border: 0px solid #fff;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    -webkit-box-shadow: 0 0 0px #999;
       -moz-box-shadow: 0 0 0px #999;
            box-shadow: 0 0 0px #999;
}

.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
    color: #fff;
}
/** Carousel **/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 639px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    width: 30px;
    max-width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
    left: 5px;
}
.jcarousel-control-next {
    right: 5px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
    position: absolute;
    bottom: 5px;
    left: 10%;
    -webkit-transform: translate(-20%, 0);
    -ms-transform: translate(-20%, 0);
    transform: translate(-20%, 0);
    margin: 0;
}
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}
.slideitem {
  display: block;
  width: 100%;
  max-width: 639px;
  height: auto !important;
}
}
 @media only screen and (max-width: 400px) {
/* General Settings for screens smaller than 400px
-----------------------------------------------------------
-----------------------------------------*/
#headercontainer {
  width: 100%;
  background-color: #86bde4;
  float: left;
}
#headercontent {
  width: 100%;
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  width: 100%;
  max-width: 300px;
  height: auto;
}
#searchbar {
  float: left;
  width: 100%;
  max-width: 300px;
}
#headerright {
  float: left;
  max-width: 669px;
  width: 100%;
  height: auto;
  padding-left: 15px ;
}
#missionstatement {
  padding: 20px 10px 10px ;
  width: 100%;
  max-width: 324px;
  float: left;
  height: auto;
}
#headerlogo {
  width: 100%;
  max-width: 246px;
  height: auto;
  float: left;
}
#bodycontainer {
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#bodycontent {
  max-width: 984px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #FFFFFF;
}
#bodyleft {
  float: left;
  max-width: 658px;
  width: 100%;
  height: auto;
  padding: 15px ;
}
#bodyright {
  float: left;
  width: 100%;
  max-width: 266px;
  height: auto;
  padding: 15px ;
}
.twocolumninsidecontent {
  width: 100% ;
}
.twocolumnscontent {
  width: 100% ;
}
.twocolumnscolumnleft {
  float: left;
  max-width: 175px;
  margin-left: 15px;
  width: 100%;
  clear: left;
}
.twocolumnscolumnright {
  height: auto;
  width: 100%;
  max-width: 453px;
  margin-left: 15px;
  float: left;
}
.CheckMarks {
  width: 100%;
  max-width: 40px;
  height: auto;
  float: left;
}
.seconddivafterbreak {
  width: 100% ;
  clear: both ;
}
#footercontainer {
  float: left ;
  width: 100%;
  background-color: #b6d1e2;
  clear: both;
}
#footercontent {
  width: 100%;
  max-width: 954px;
  margin-right: auto;
  margin-left: auto;
  background-color: #D5D5DB;
  text-align: center;
  padding: 15px ;
}
#navbarcontainer {
  background-color: #86bde4;
  background-image: url(../images/topbackgroundsmall.jpg);
  background-position: left bottom;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  text-align: center;
  clear: both;
  background-repeat: repeat-x;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 984px;
  text-align: center;
  clear: both;
  display: inline ;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 100%;  
  max-width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  max-width: 639px;
  width: 100%;
  float: left;
  height: auto;
}
.BannerColumn2 {
  width: 100%;
  max-width: 345px;
  float: left;
  height: auto;
}
img {
  border-style: solid;
  border-width: 0px;
  width: 100%;
  height: auto;
}
.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
#tswcsstabs ul {
 margin-top: 10px;
 padding: 0px ;
 list-style: none ;
 display: inline-block ;
}
#tswcsstabs ul li {
        margin: 0 ;
 padding: 0 ;
 display: inline-block ;
 text-align: center ;
 list-style: none ;
 font-family: Arial, Helvetica, sans-serif ;
}
#tswcsstabs li a {
 color: #ffffff ;
 background-color: #003399 ;
 border: 1px outset #ffffff ;
 padding: 8px ;
 text-decoration: none ;
 display: inline-block ;
}
#tswcsstabs li a:hover {
 color: #ffffff ;
 background-color: #adccca ;
        display: inline-block ;
}
.jcarousel-wrapper {
    margin: 0;
    position: relative;
    border: 0px solid #fff;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    -webkit-box-shadow: 0 0 0px #999;
       -moz-box-shadow: 0 0 0px #999;
            box-shadow: 0 0 0px #999;
}

.jcarousel-wrapper .photo-credits {
    position: absolute;
    right: 30px;
    bottom: 0;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
    opacity: .66;
}
.jcarousel-wrapper .photo-credits a {
    color: #fff;
}
/** Carousel **/
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 639px;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
.jcarousel-control-prev,
.jcarousel-control-next {
    position: absolute;
    top: 50%;
    width: 30px;
    max-width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0 0 2px #999;
       -moz-box-shadow: 0 0 2px #999;
            box-shadow: 0 0 2px #999;
}
.jcarousel-control-prev {
    left: 5px;
}
.jcarousel-control-next {
    right: 5px;
}
.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
    display: block;
}
.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
    opacity: .5;
    cursor: default;
}
/** Carousel Pagination **/
.jcarousel-pagination {
    position: absolute;
    bottom: 5px;
    left: 10%;
    -webkit-transform: translate(-20%, 0);
    -ms-transform: translate(-20%, 0);
    transform: translate(-20%, 0);
    margin: 0;
}
.jcarousel-pagination a {
    text-decoration: none;
    display: inline-block;
    
    font-size: 11px;
    line-height: 14px;
    min-width: 14px;
    
    background: #fff;
    color: #4E443C;
    border-radius: 14px;
    padding: 3px;
    text-align: center;
    
    margin-right: 2px;
    
    opacity: .75;
}
.jcarousel-pagination a.active {
    background: #4E443C;
    color: #fff;
    opacity: 1;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 0 2px #F0EFE7;
    -moz-box-shadow: 0 0 2px #F0EFE7;
    box-shadow: 0 0 2px #F0EFE7;
}
.slideitem {
  display: block;
  width: 100%;
  max-width: 639px;
  height: auto !important;
}
}
  </style>
#questions #rule #thread
Paul M Smith 10 years ago

For your mission statement image I would lessen the padding-left in your @media only screen and (max-width: 400px) to allow it to fit in the smaller viewports.
- Thanks
{{ DiscussionBoard.errors[9442803].message }}
jbearnolimits
10 years ago
Ok, I have another question. The banner has a slide and an ad for a free ebook. How can I keep the ebook div from stacking under the slide at some of the smaller viewports? Is there a way to keep them both on the same line and just shrink them both?
Thanks
1 reply
{{ DiscussionBoard.errors[9444000].message }}
jbearnolimits
10 years ago
Originally Posted by jbearnolimits
Anyone have an answer for this?
Thanks
{{ DiscussionBoard.errors[9448539].message }}
One thread to rule them all (all of my questions)

Trending Topics

How did you turn it all around?

Any thoughts on golf's latest phenom...Scottie Scheffler??

Infographic: How B2B marketers on LinkedIn can maximise their efforts for better audience reach

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Some interesting stats about brand comms
