another image overflow problem
On this page http://portsmouthgreekfestival.com/sponsors.html the top 2 images, Dinnerhorn and Bratskellar, overflow and don't resize down on smaller screens.
css is here http://portsmouthgreekfestival.com/styles.css
Code:
body {
width:100%;
margin:0;
font-family:'Open Sans',sans-serif;
font-size:100%;
background-color:#759FAF;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
#vlb1overlay {z-index:100 !important;}
#container {
width:90%;
margin:auto;
background-color:#fff;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
#logo {
display:block;
width:100%;
}
#content {
clear:both;
position:relative;
padding:1.5em 5%;
}
#img {
max-width: 100%;
height: auto;
}
h1 { clear: both; }
h2 {
clear:both;
text-align:center;
}
h3 { clear: both; }
audio {
visibility:hidden;
height:0;
width:0;
}
#pauseplay {
float:right;
width:32px;
height:32px;
cursor:pointer;
}
.innerBox {
background-color : #ffffff;
background-repeat : repeat-y;
padding-top: 1em;
padding-left: 1em;
padding-right: 1em;
padding-bottom : 1em;
}
a:link {
text-decoration: underline;
}
a:visited {
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
#social {
margin:auto;
text-align:center;
}
.columns {
width:100%;
}
.left{
float:left;
width: 100%;
padding:.5em 2%;
max-width: 400px;
}
.right {
width: 100%;
float: right;
padding:.5em 2%;
max-width: 400px;
}
.clear {
clear:both;
}
@media screen and (max-width: 300px) {
body {
/* Styles */ }
}
}
/* grid */
[class*="row-"] {
margin-bottom: 20px;
}
[class*="row-"]:last-child {
margin-bottom: 0;
}
[class*="col-"] {
}
@media all and ( min-width: 768px ) {
/* all cols margin */
[class*="col-"] {
margin-right: 20px;
}
[class*="col-"]:last-child {
margin-right: 0;
}
/* make the columns responsive */
.col-1-2 {
float: left;
width: 50%;
}
.col-1-4 {
float: left;
width: 25%;
}
.col-1-8 {
float: left;
width: 25%;
}
/* 2 span rows */
.row-2 {
padding-left: 20px;
}
.row-2 [class*="col-"]:first-child {
margin-left: -20px;
}
/* 4 span rows */
.row-4 {
padding-left: 60px;
}
.row-4 [class*="col-"]:first-child {
margin-left: -60px;
}
/* 8 span rows */
.row-8 {
padding-left: 60px;
}
.row-8 [class*="col-"]:nth-child(4n+1) {
margin-left: -60px;
}
.row-8 [class*="col-"]:nth-child(5n-1) {
margin-right: 0;
}
.row-8 [class*="col-"]:nth-child(6n-1) {
clear: both;
}
}
@media all and ( min-width: 1200px ) {
/* adjust width */
.col-1-8 {
float: left;
width: 12.5%;
}
/* 8 span rows */
.row-8 {
padding-left: 140px;
}
/* reset these... */
.row-8 [class*="col-"]:nth-child(4n+1) {
margin-left: 0;
}
.row-8 [class*="col-"]:nth-child(5n-1) {
margin-right: 20px;
}
.row-8 [class*="col-"]:nth-child(6n-1) {
clear: none;
}
/* and add this */
.row-8 [class*="col-"]:nth-child(1) {
margin-left: -140px;
}
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.google-maps {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF TWO */
.span_2_of_2 {
width: 100%;
}
.span_1_of_2 {
width: 49.2%;
}
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
}
@media only screen and (max-width: 480px) {
.span_2_of_2, .span_1_of_2 { width: 100%; }
}
#map {
height: 100%;
}
#footer {
background:#759FAF;
width:90%;
margin:auto;
text-align:center;
font-family:sans-serif;
font-size:80%;
color:#fff;
padding:0.5em 0;
}
#footer a {
color:#fff;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
