Sat, 2022-12-31 05:32
My website is responsive sizing to my phone but the enlarged lightbox photo gallery images are not. Any suggestions would be welcomed.
<!DOCTYPE html> <title>Richard Montagna Photography</title> <meta charset="UTF-8"> <meta name="description" content="Medium and large format landscapes, portraits and travel photography"> <meta name="keywords" content="Large format landscape photography, medium format portraits, medium format travel photography"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <style> body,h1,h2,h3,h4,h5,h6 {font-family: "Karma", sans-serif} .w3-bar-block .w3-bar-item {padding:20px} .responsive{ width: 100%; text-align: center; padding: 10px; margin: auto; height: auto; } .banner{ width: 100%; padding: 10px; height: auto; } .divC { width: 90%; text-align: center; padding: 10px; margin: 0; } .divL { width: 90%; text-align: left; padding: 10px; margin: 0; } .divR { width: 90%; text-align: right; padding: 10px; margin: 0; } .divA { width: 100%; text-align: center; padding: 10px; margin: 0; } .column2 { float: left; width: 250px; padding: 10px; margin: auto; } ul { list-style-type: none; padding: 0; margin :0; } A:hover { COLOR: #ff0000; TEXT-DECORATION: none } </style> <body> <!-- Sidebar (hidden by default) --> <nav class="w3-sidebar w3-bar-block w3-card w3-top w3-xlarge w3-animate-left" style="display:none;z-index:2;width:40%;min-width:300px" id="mySidebar"> <a href="javascript:void(0)" onClick="w3_close()" class="w3-bar-item w3-button">Close Menu</a> <a href="https://www.richardmontagna.com/" onClick="w3_close()" class="w3-bar-item w3-button">Home</a> <a href="https://www.richardmontagna.com/portraits.htm" onClick="w3_close()" class="w3-bar-item w3-button">People</a> <a href="https://iditarodtours.com/" onClick="w3_close()" class="w3-bar-item w3-button">Iditarod Sled Dog Race Photo Tours</a> </nav> <!-- Top menu --> <div class="w3-top"> <div class="w3-white w3-xlarge" style="max-width:1200px;margin:auto"> <div class="w3-button w3-padding-16 w3-left" onClick="w3_open()">☰</div> <div class="w3-center w3-padding-16">Richard Montagna Photographer</div> <div class="w3-center w3-padding-16">Specializing in Medium and Large Format Photography</div> </div> </div> <!-- !PAGE CONTENT! --> <div class="w3-main w3-content w3-padding" style="max-width:1300px;margin-top:100px"> <!-- First Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/landscape1l.jpg" rel="lightbox[f]"><img src="images/landscape1.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape2l.jpg" rel="lightbox[f]"><img src="images/landscape2.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape3l.jpg" rel="lightbox[f]"><img src="images/landscape3.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape4l.jpg" rel="lightbox[f]"><img src="images/landscape4.jpg" alt="click to enlarge"class="responsive" width="300" height="300" ></a> </div></div> <!-- Second Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/trainl.jpg" rel="lightbox[f]"><img src="images/train.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel2l.jpg" rel="lightbox[f]"><img src="images/travel2.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape5l.jpg" rel="lightbox[f]"><img src="images/landscape5.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel1l.jpg" rel="lightbox[f]"><img src="images/travel1.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Third Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/landscape15l.jpg" rel="lightbox[f]"><img src="images/landscape15.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape14l.jpg" rel="lightbox[f]"><img src="images/landscape14.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape13l.jpg" rel="lightbox[f]"><img src="images/landscape13.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape9l.jpg" rel="lightbox[f]"><img src="images/landscape9.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Fourth Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/landscape12l.jpg" rel="lightbox[f]"><img src="images/landscape12.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape10l.jpg" rel="lightbox[f]"><img src="images/landscape10.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/cathedralL.jpg" rel="lightbox[f]"><img src="images/cathedral.jpg" alt="click to enlarge"class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel3l.JPG" rel="lightbox[f]"><img src="images/travel3.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Fifth Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/travel6l.jpg" rel="lightbox[f]"><img src="images/travel6.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/landscape6l.jpg" rel="lightbox[f]"><img src="images/landscape6.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel5l.jpg" rel="lightbox[f]"><img src="images/travel5.jpg" alt="click to enlarge"class="responsive" width="300" height="300" ></a></div> <div class="w3-quarter"> <a href="images/landscape11l.JPG" rel="lightbox[f]"><img src="images/landscape11.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Sixth Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/travel4l.jpg" rel="lightbox[f]"><img src="images/travel4.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel7l.jpg" rel="lightbox[f]"><img src="images/travel7.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel8l.jpg" rel="lightbox[f]"><img src="images/travel8.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel9l.jpg" rel="lightbox[f]"><img src="images/travel9.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Seventh Photo Grid--> <div class="w3-row-padding w3-padding-16 w3-center" id="food"> <div class="w3-quarter"> <a href="images/travel10l.jpg" rel="lightbox[f]"><img src="images/travel10.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel11l.jpg" rel="lightbox[f]"><img src="images/travel11.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel12l.jpg" rel="lightbox[f]"><img src="images/travel12.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div> <div class="w3-quarter"> <a href="images/travel13l.jpg" rel="lightbox[f]"><img src="images/travel13.jpg" alt="click to enlarge" class="responsive" width="300" height="300" ></a> </div></div> <!-- Pagination --> <div class="w3-center w3-padding-32"> <div class="w3-bar"> <a href="https://richardmontagna.com/" class="w3-bar-item w3-black w3-button">1</a> <a href="https://richardmontagna.com/portraits.htm" class="w3-bar-item w3-button w3-hover-black">2</a> </div> </div> <!-- About Section --> <div class="w3-container w3-padding-32 w3-center"> <h3>About Montagna Photography</h3> <div class="w3-padding-10"> Rich Montagna has been looking at the world through the viewfinder for over 40 years. Trained in large format commercial photography at the Academy of Art College in San Francisco and the prestigous Brooks Institute of Photography, he specializes in medium and large format photography. His images have been published in magazines, newspapers and exhibited in the Alaska State Museum, the Anchorage Museum of History and Art, the Ferry Building Gallery in West Vancouver, the Roundhouse Community Center Gallery, the West Vancouver library and numerous smaller museums and galleries across North America.<br> If you would like to spend time with Rich and improve your photographic technique, join him on his annual <a href="https://iditarodtours.com/" title="Alaska Iditarod Race Tour">Alaska Iditarod Sled Dog Race Tour</a> Rich lived in the village of McGrath on the Iditarod trail for many years and has been leading clients along the trail to follow the Iditarod Sled Dog Race for over 25 years. If you have an interesting photo assignment, give him a call to discuss details.<br> <center><H3>Tel. 604-578-8529<br>Powell River, British Columbia </H3></center> </div> </div> <!-- End page content --> </div> <script> // Script to open and close sidebar function w3_open() { document.getElementById("mySidebar").style.display = "block"; } function w3_close() { document.getElementById("mySidebar").style.display = "none"; } </script> </body> </html> [code]
