Log in

View Full Version : Resolved another image overflow problem


mlegg
07-13-2015, 04:18 PM
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

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 */
}
mlegg
07-13-2015, 04:19 PM
the html is

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Description" content="Three fun-filled days in Portsmouth NH as the magic of Greece comes to town. The Glendi or party will begin on Friday, July 19th, July 20th and July 21st with authentic Greek food. We will offer live Greek music from the band orfeas and continual music by DJ Meleti. In addition to the food, there will be booths that will offer imported jewelry, arts and crafts from Greece. A children's play area will ensure the entire family enjoys their virtual visit to this ancient land.">
<meta name="Keywords" content=" st. nicholas greek orthodox church, nicholas in greek, greek cuisine, st. nicholas greek orthodox cathedral, charleston food and wine, greek orthodox archdiocese, goarch.org, greek food festivals, st nicholas greek festival, greek food festival, wine events, orthodox christianity, food and wine events, wine tasting events, greek orthodox calendar, dallas greek festival, greek festival st. louis, st nick gift ideas, st nicholas greek orthodox, what to do in portsmouth nh, wine and food events, greek for church, greek orthodox religion, food and wine festival 2015, nicholas greek, st nicholas greek, st louis greek, festival seacoast online calendar, portsmouth events, orthodox music, greek orthodox christian, greek orthodox churches, greek orthodox music, greek orthodox christianity, greek festival st louis mo, greek dates, seacoast nh events, st nick gifts, greek orthodox icon, annunciation ,greek orthodox wine event, orthodox greek food and wine festivals, 2013 food and wine event, church in greek, greek orthodox church ann arbor, famous greek foods, portsmouth high, charleston wine festival, live music in portsmouth nh, activities in portsmouth nh, greek orthodox faith, greek orthodox festival st nicholas, orthodox greek nicholas, food and wine tasting, food and wine shows, food and wine events 2015, moving to portsmouth nh, portsmouth nh food music festival july, portsmouth nh classifieds, greek food items, live music in nh, festival this weekend, festival of food, eastern orthodox music, greek orthodox religious items, glendi festival, music festival, vendors, where is portsmouth nh, portsmouth activities, saint nicholas orthodox, becoming greek orthodox, greek church, music, music festival dates, greek orthodox bishop, orthodox children festival in july, greek orthodox food events in portsmouth, greek orthodox festivals, dates in greek, eastern orthodox new year, greek orthodox schools, food in portsmouth, music festival in july, beer, weekend wine activities, the greek orthodox, on line events, greek orthodox community, orthodox music ">
<title>Greek Festival Portsmouth</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Start css3menu.com HEAD section -->
<link rel="stylesheet" href="nav_menu_files/css3menu1/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
<!-- End css3menu.com HEAD section -->
<style type="text/css">
audio {visibility: hidden; height: 0; width: 0; position: absolute; top: -300px; left: -300px;}
#pauseplay {float: right; width: 48px; height: 48px; overflow: hidden; cursor: pointer}
</style>
</head>
<body>
<div id="container">
<img id="logo" src="images/Banner.jpg" alt="Portsmouth Greek Festival Logo">
<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher"></label> <li class="topfirst"><a href="index.html" title="Home" style="height:27px;line-height:27px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABNklEQVRIie3TIU4DURSF4QpkBQKSOhCVLKAOVAOqmyAoGpYwBk/CBpBIXCtI2EQJoiQgkNi6JnyI3qGPR2k6MAQEJ7nJ5J17/5N5c6fRqCA00awyUwXexiiqXTf8ELfmusVhHeBNnGLioybhbX4V3sJ1Bn2MSnWNVlV4B08ZaIiNqGHmPaGzKvwY0wxQYK3congusp4pjpeBm7jMhp6xH/6O+RbtxNl+9KS6lK8yuhhkjVfYDb+PceKN0Q9vL3pTDdAt4Ue4S8wXnGHLbPfPfa7z6NmOmZfEu8NRIxt4wEkEHyx4q0Ua4CBmToLxpjTgBr3kSu5XgJe6N7+yXrDeBQyxbvahLyqAc10EYz2YGiiSjz36BrzUKO G9scuDWrTsX/i1gOKTqiegrv7/gL8RUCyquvp/RK9oMw1GwfTPzgAAAABJRU5ErkJggg==" alt=""/>&nbsp</a></li>
<li class="topmenu"><a href="involved.html" title="Get Involved" style="height:27px;line-height:27px;">Get Involved</a></li>
<li class="topmenu"><a href="menu.html" title="Menu" style="height:27px;line-height:27px;">Menu</a></li>
<li class="topmenu"><a href="events.html" title="Schedule of Events" style="height:27px;line-height:27px;">Schedule of Events</a></li>
<li class="topmenu"><a href="sponsors.html" title="Sponsors" style="height:27px;line-height:27px;">Sponsors</a></li>
<li class="toplast"><a href="contact.html" title="Contact &amp; Directions" style="height:27px;line-height:27px;">Contact &amp; Directions</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css3 menu</a> by Css3Menu.com</p>
<div id="content">
<div style="text-align:center">
<img src="Sponsors/platinum.jpg"><br><br>
<a href="http://www.dinnerhorn.com" target="_blank"><img src="Sponsors/dinnerhorn.png"></a><a href="http://www.dinnerhorn.com" target="_blank"></a><a href="http://www.dinnerhorn.com" target="_blank"><img src="Sponsors/brat.png"></a><a href="http://www.dinnerhorn.com" target="_blank"></a>
</div>
<br><br>

<div style="text-align:center">
<img src="Sponsors/gold.jpg"><br><br>
<a href="http://www.bowlorama.com" target="_blank"><img src="Sponsors/Bowl-O-Rama-150.jpg"></a>&nbsp;
<a href="http://lensdoctors.net" target="_blank"><img src="Sponsors/lensdrs-150.jpg"></a>&nbsp;
<a href="http://www.hilltopchevy.com/index.htm" target="_blank"><img src="Sponsors/HilltopLogo.jpg"></a>&nbsp;
<a href="http://gepettospizzeria.com" target="_blank"><img src="Sponsors/gepettos-150.jpg"></a>&nbsp;
<a href="http://www.galleyhatch.com" target="_blank"><img src="Sponsors/galleyhatch-150.gif"></a>
<a href="http://www.samonasgroup.com" target="_blank"><img src="Sponsors/samonas.jpg"></a>
<a href="http://www.campusspecial.com/new-hampshire/restaurant/durham-house-of-pizza" target="_blank"><img src="Sponsors/DHOP.jpg"></a>&nbsp;
<a href="https://www.facebook.com/JarvisCenter" target="_blank"><img src="Sponsors/JarvisCenter.jpg"></a>
<a href="http://www.tellysrestaurant.com/" target="_blank"><img src="Sponsors/Tellys.jpg"></a>
<a href="http://cinemagicmovies.com/" target="_blank"><img src="Sponsors/Cinemagic.jpg"></a>&nbsp;
<a href="http://www.favoritefoods.com" target="_blank"><img src="Sponsors/favoritefoods.jpg"></a>&nbsp;
<a href="http://www.mamalenasstratham.com" target="_blank"><img src="Sponsors/mamalenas.jpg"></a>&nbsp;
<a href="http://www.jumpinjacksjava.com" target="_blank">
<img src="Sponsors/JJJava.jpg"></a>&nbsp;
<a href="http://www.gmfilias.com/" target="_blank"><img src="Sponsors/Filias.gif"></a>&nbsp;
<a href="http://www.yummies.com" target="_blank"><img src="Sponsors/yummies.gif"></a>&nbsp;
<a href="http://www.pizzafactorynh.com" target="_blank"><img src="Sponsors/portsmouth-pizza-factory.png"></a>&nbsp;
<a href="http://www.philbricksfreshmarket.com/" target="_blank"><img src="Sponsors/Philbricks.jpg"></a>&nbsp;
</div>
<br><br>

<div style="text-align:center">
<img src="Sponsors/silver.jpg"><br><br>
<a href="http://www.nikandcharlies.com" target="_blank"><img src="Sponsors/Nik&CharliesLogo.png"></a>&nbsp;
<a href="http://www.nepizzaexeter.com" target="_blank"><img src="Sponsors/NEPizza.gif"></a>&nbsp;
<a href="https://www.facebook.com/pages/Town-Pizza-Kittery-Me-Ph-207-439-1265/341324542174" target="_blank"><img src="Sponsors/TownPizza.gif"></a>&nbsp;
<a href="http://www.cafenostimo.com" target="_blank"><img src="Sponsors/cafenostimo.jpg"></a>&nbsp;
<a href="http://strathamasc.com/" target="_blank"><img src="Sponsors/StrathamAmbulance.jpg"></a>&nbsp;
<a href="http://atlanticdigestive.com/" target="_blank"><img src="Sponsors/AtlanticDigestive.png"></a>&nbsp;
<a href="http://www.dunkindonuts.com/" target="_blank"><img src="Sponsors/DunkinDonuts.jpeg"></a>&nbsp;
<a href="http://www.excellentvision.com/" target="_blank"><img src="Sponsors/ExcellentVision.png"></a>&nbsp;

</div>
<br><br>

<div style="text-align:center">
<img src="Sponsors/bronze.jpg"><br><br>
<a href="http://www.jvwoodfuneralhome.com/fh/home/home.cfm?&fh_id=11813" target="_blank"><img src="Sponsors/jvwfunereralhome.jpg"></a>&nbsp;
<a href="http://portsmouthhospital.com" target="_blank"><img src="Sponsors/PortsmouthRegionalHospital.jpg"></a>&nbsp;
<a href="http://www.federalcigar.com" target="_blank"><img src="Sponsors/federal-cigar.jpg"></a>&nbsp;

<a href="http://www.farrellfuneralhome.com/" target="_blank"><img src="Sponsors/Farrell.png"></a>&nbsp;
<a href="http://jardiniereflowers.com/" target="_blank"><img src="Sponsors/Jardiniere.gif"></a>&nbsp;
<a href="http://nikandcharlies.com/" target="_blank"><img src="Sponsors/Nik&CharliesLogo.png"></a>&nbsp;
<a href="http://www.2guyscigars.com/" target="_blank"><img src="Sponsors/2GuysSmokeShop.png"></a>&nbsp;
<a href="http://gregsbistro.com/" target="_blank"><img src="Sponsors/GregsBistro.jpg"></a>&nbsp;
<a href="http://www.bosenandassociates.com/" target="_blank"><img src="Sponsors/Bosen.jpg"></a>&nbsp;
<img src="Sponsors/VillagePizza.jpg"></a>&nbsp;
<img src="Sponsors/Noucas.jpg"></a>&nbsp;
<br>
</div>

<div style="clear:both;">
<h3 style="text-align:center"><a href="sponsorship.html">Would you like to be a sponsor the Greek Festival?</a></h3>
</div>
<div style="clear:both;"></div>
</div></div></div>
<div id="footer"><p>Copyright &copy; <a href="http://www.portsmouthgreekfestival.com/">PortsmouthGreekFestival.com</a></div>
</body></html>

Thank you in advance.
Mike
Beverleyh
07-13-2015, 04:37 PM
In your CSS you are using "#img" as your selector, which is a selector for elements with an id of "img". If you want to target all images, the selector should be "img".

Also, a note about your keywords. There are way too many in your meta tag and that may be seen as black hat / keyword stuffing by search engines, which could get you penalised.

10-15 keywords is considered more appropriate.
mlegg
07-13-2015, 05:00 PM
Thanks for your help!!!