Skip to main content
B
Baruti
Participant
April 20, 2022
Question

Image Fluid . . . well, not fluid.

  • April 20, 2022
  • 2 replies
  • 653 views

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]>
    <![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">&nbsp;</section>
  <a href="#hero">&nbsp;</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">&copy;2022 <strong>Bridget Phimmasone - All Rights Reserved</strong></div>
</div>
<!-- Main Container Ends -->
</body>
</html>

 

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 20, 2022

Your code is outdated.  Which version of Dreamweaver are you using?

 

For responsive images, this is all you need.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive</title>
</head>

<style>
.container {
width:90%; 
margin:0 auto
}

img {
max-width:100%; 
display:block; 
vertical-align: baseline
}

</style>
<body>
<div class="container">
<h1>Responsive Images</h1>

<p><img src="https://dummyimage.com/900x500" alt="Placeholder"></p>

<p><img src="https://dummyimage.com/600x300" alt="Placeholder"></p>

<p><img src="https://dummyimage.com/400x600" alt="Placeholder"></p>

</div>
</body>
</html>

 

 

 

Nancy O'Shea— Product User & Community Expert
B
BarutiAuthor
Participant
April 20, 2022

Hello Nancy,

 

Thank you for replying.

 

The version indicates 21.2.

 

I will update to note the difference and report back.

 

Again, thank you!

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
April 20, 2022

I think your online site presents well.  But the light gray text on a white background is  hard to see.  You might want to stick with normal font, color and weight values to make it easier for job recruiters to read.

 

body {
font-family: source-sans-pro;
background-color: #f2f2f2;
margin: 0;
font-style: normal;
font-weight: 200;

 

text_column {
width: 29%;
text-align: justify;
font-weight: lighter;
line-height: 25px;
float: left;
padding-left: 20px;
padding-right: 20px;
color: #A3A3A3;

color:#222222;

}

 

For your Project images, replace what you have now with this:

 

.img-fluid {
max-width: 100%;
display: block;
vertical-align: baseline;

}

 

.thumbnail {
width: 33%;
text-align: center;
float: left;
margin-top: 35px;
overflow: hidden;
}

 

That should get you back on track.

 

Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    April 20, 2022

    What do you have in the "singlePageTemplate.css" file?

    Right now, the CSS you've shared doesn't actually "do" anything, it's just a bunch of empty media queries. 

    B
    BarutiAuthor
    Participant
    April 20, 2022

    Helo Jon,

     

    Thak you for replying.

     

    The Template is one selected within Dreamweaver.

     

    Given the matter may be the version used, I shall update as suggested by Nancy below.

     

    Again, thank you!

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices