Results 1 to 4 of 4

Thread: another image overflow problem

  1. #1
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default 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 */
    }
    Last edited by mlegg; 07-13-2015 at 05:01 PM.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    the html is
    Code:
    <!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+yXrDeBQyxbvahLyqAc10EYz2YGiiSjz36BrzUKOG9scuDWrTsX/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

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  4. The Following User Says Thank You to Beverleyh For This Useful Post:

    mlegg (07-13-2015)

  5. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    675
    Thanks
    98
    Thanked 26 Times in 26 Posts

    Default

    Thanks for your help!!!

Similar Threads

  1. Image overflow problem
    By alexrabe in forum Other
    Replies: 0
    Last Post: 11-29-2011, 10:18 PM
  2. Replies: 0
    Last Post: 03-05-2010, 08:01 AM
  3. Overflow problem
    By HaMoDeY in forum HTML
    Replies: 1
    Last Post: 05-11-2007, 09:32 PM
  4. Replies: 8
    Last Post: 05-02-2006, 11:52 PM
  5. Overflow problem?
    By Crimson in forum CSS
    Replies: 2
    Last Post: 02-14-2006, 07:50 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •