1 Attachment(s)
images overflow when screen is smaller
On this test page the larger images overflow outside of the main white part of the container when you resize the browser down smaller. How can I fix this? I tried Beverly's reponsive image gallery but the images on this test site are all different sizes, and the owner wants them to stay the original sizes.
Attachment 5686
css is too large to post here http://andrewsamonas.com/styles.css
html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>HungryHillWebs.com</title>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="msvalidate.01" content="A0C1E8EC728A490DC311D88638123B3E" />
<!-- 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 -->
</head>
<body>
<div id="container">
<img id="logo" src="images/2015-Hill-Banner.jpg" alt="2015-Hill-Banner">
<!-- 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:20px;line-height:20px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAB4ElEQVR42o2TzUsbQRjGn5nENa2yMQc/0lIkeJDiFymCWA8G/wVBpBD6B3jx0J4rtDc91GNAFBGPguceJIiUHsRi8KJFWhUNNbFtTNpuN7Mzvtld46Zx0QdmmXln3t/7zOwMk+uvR9mPkzSkxL3FqUn6dHQlmFqYVIj13j/Zq697YGpxQqGz3xO1bqrEkxDnWwieHPsAMmDWwoTiMQ8gNgI86gGMEhCOObHMEpA/8/q/ASgCoAYwTG2svloNBD4Abtm2q5XvgngBUqP8vhf+ya7k4Sr40bf6MxBB4I8sQ0/MOAtzHyHzXxxj+hPwx2MQmVWIz8sI5UsO4K/hOoh2QV5kUfh+iMirTXsutzIOub/rALoH0JpcQ3FzHuxDCs0PXDtlEOBtXCFgQpYlLqRA68yBPfd75z2UeW73mdaGpmfTKKbnEdhI4WGjF/DmqUIDWabzy5kC7e8cQHZ5HFopa/fN5iiiL9dQ2HAANQ4sAnACCBrkhEDUBRS2VxAUv+y+CLYgPJjETwI0/A+4dmADyAGeT8Gk7fAAr/sD/PQTwqe7twMqMv4RxDAhfB6WrmmIhDjBvYC5IQXjsrqo4sRPnExVkysK6WBidng0wJBG0dmvdG979eLcNq4EmnRYSiWuAGXi13OQBAdhAAAAAElFTkSuQmCC" alt=""/>Home</a></li>
<li class="topmenu"><a href="HistoryOLOH.html" title="History of OLOH" style="height:20px;line-height:20px;">History of OLOH</a></li>
<li class="topmenu"><a href="#" title="Photos" style="height:20px;line-height:20px;"><span>Photos</span></a>
<ul>
<li><a href="PanoramaSchoolPic.html" title="OLOH School Panorama">OLOH School Panorama</a></li>
<li><a href="Event_Albums/Event_Albums.html" title="Event Photo Albums">Event Photo Albums</a></li>
<li><a href="Hill_Photo_Albums/Hill_Photo_Albums.html" title="Hungrey Hill Photo Albums">Hungry Hill Photo Albums</a></li>
</ul></li>
<li class="topmenu"><a href="Books.html" title="Books" style="height:20px;line-height:20px;">Books</a></li>
<li class="topmenu"><a href="available.html" title="T-Shirts & Hats" style="height:20px;line-height:20px;">Merchandise</a></li>
<li class="topmenu"><a href="GeeBeeRacers.html" title="Gee Bee Racers" style="height:20px;line-height:20px;">Gee Bee Racers</a></li>
<li class="toplast"><a href="ShortStories.html" title="Stories" style="height:20px;line-height:20px;">Stories</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">css3 menu generator</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->
<div id="content">
<h1 style="text-align:center">Welcome to the HUNGRYHILLWEB.COM site</h1>
<p>I am going to continue to update this page with photos and stories. If you have any pictures you would like to see posted here please feel free to email them to me or arrange to drop them to me so I can scan them for you and post them.</p>
<p>Please email with any stories or pictures you would like to share.</p>
<p>Thanks for looking, Joe Christofori </p>
<p>My other web page is <a href="http://joechristo.com/Welcome.html">JoeChristo.com</a></p>
<p id="help">HELP! The Site needs Pictures. If you scan a photo, please try to scan the phot at 300 DPI (ask your grandkids to help you if you cant figure this out.
If you have any photos to share please email me at Joechristo@comcast.net</p>
<div style="text-align:center">
<img src="images/HillTeamPhoto.png" alt="Hungry Hill Team">
<img src="images/BlarneyStone.png" alt="Blarney Stone">
<img src="images/BlockParty.jpg" alt="Block Party">
<img src="images/hill-cloud.jpg" alt="Hill Cloud">
<img src="images/Ireland-Trips-past-011.jpg" alt="Ireland-Trips-past-011">
<img src="images/JBO-Gaelic-football-team.jpg" alt="JBO-Gaelic-football-team">
<img src="images/JackHoar&Mantle.jpg" alt="Jack Hoar & Mantle">
<img src="images/KFleury3.jpg" alt="KFleury3">
<img src="images/Ladder-9-5.jpg" alt="Ladder-9-5">
<img src="images/Legion430.png" alt="Legion 430">
<img src="images/team1.png" alt="team 1">
<img src="images/team2.png" alt="team 2">
<img src="images/VanHorn.jpg" alt="Van Horn">
<IMG class="center" src="images/good-diggin.png" alt="Good Diggin">
<div style="clear:both;"></div>
</div></div></div>
<div id="footer">© <a href="http://hungryhillweb.com/Welcome.html">HungryHillWebs.com</a> <a href="mailto:Joechristo@comcast.net">Joe Christofori</a> </div>
<script type="text/javascript">var _cmo = {form: '556bb4cb31a13b0003001ea0', text: 'Contact Me', align: 'left', valign: 'middle', lang: 'en', background_color: '#07944E'}; (function() {var cms = document.createElement('script'); cms.type = 'text/javascript'; cms.async = true; cms.src = ('https:' == document.location.protocol ? 'https://d1uwd25yvxu96k.cloudfront.net' : 'http://static.contactme.com') + '/widgets/tab/v1/tab.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cms, s);})();</script>
</body>
</html>
