Question
Image Fluid . . . well, not fluid.
As the Subject indicates, when setting three images to fluid within Dreamweaver, they are not responding/reorganizing as intendedn when mov\ing between devices. Realizing this may prove a simple fix that I am missing due to staring at it for perhaps too liong, I thought to post here for solutions. The code is below: Thank you in advance.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bridget Phimmasone</title>
<link href="css/singlePageTemplate.css" rel="stylesheet" type="text/css">
<style type="text/css">
@media (max-width: 479px){
}
@media (max-width: 520px){
}
@media (max-width: 592px){
}
@media (max-width: 600px){
}
@media (max-width: 672px){
}
@media (max-width: 700px){
}
@media (max-width: 720px){
}
@media (max-width: 767px){
}
@media (max-width: 800px){
}
@media (max-width: 840px){
}
@media (min-width: 481px) and (max-width: 568px){
}
@media (min-width: 568px) and (max-width: 767px){
}
@media (min-width: 481px){
}
@media (min-width: 569px){
}
@media (min-width: 592px){
}
@media (min-width: 768px){
}
@media (min-width: 960px){
}
@media (max-width: 960px){
}
@media (max-width: 1000px){
}
@media (max-width: 1279px){
}
</style>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/source-sans-pro:n2:default.js" type="text/javascript"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Main Container -->
<div class="container">
<!-- Navigation -->
<header> <a href="">
<h4 class="logo"></h4>
</a>
<nav>
<ul>
<li><a href="http://www.bridgetphimmasone.com/index.html">HOME</a></li>
<li><a href="http://www.bridgetphimmasone.com/#about">ABOUT</a></li>
<li><a href="http://www.bridgetphimmasone.com/projects.html">PROJECTS</a></li>
<li><a href="/docs/pdf/RESUME-APRIL-2022-REVISED.pdf">RESUME</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="hero">
<h1 class="hero_header"><span class="light"><strong>Projects</strong></span></h1>
<p class="tagline"></p>
</section>
<!-- Projects Section -->
<section class="projects" id="projects"> </section>
<a href="#hero"> </a>
<div class="gallery">
<div class="thumbnail"> <a href="media/video/VIS172assignment5_REVISED.mp4"><img src="media/images/VIS172_SCREENSHOT.jpg" class="img-fluid"/></a>
<h4>VIS 172 Motion Design and Visual Effects</h4>
<p>Final Project. December 2021</p>
</div>
<div class="thumbnail"> <a href="media/video/BridgetPhimmasone_FinalProject_FinalScreening.mp4"><img src="media/images/VIS175_SCREENSHOT.jpg" class="img-fluid"/></a>
<h4>VIS 175 Editing</h4>
<p>Theory and Practice - Final Project. November 2021</p>
</div>
<div class="thumbnail"> <a href="media/video/HAWAII_2017.mp4"><img src="media/images/HAWAII_SCREENSHOT.jpg" class="img-fluid"/></a>
<h4>Personal Project </h4>
<p>Hawaii Trip Recap. August 2017</p>
</div>
</div>
<!-- Parallax Section -->
<section class="banner">
<h2 class="hidden">Contact</h2>
<h2 class="parallax">BRIDGET PHIMMASONE</h2>
<p class="parallax_description">BRIDGET.PHIMMASONE@GMAIL.COM</p>
</section>
<!-- Copyrights Section -->
<div class="copyright">©2022 <strong>Bridget Phimmasone - All Rights Reserved</strong></div>
</div>
<!-- Main Container Ends -->
</body>
</html>
AdChoices