Image Fluid . . . well, not fluid.

Community Beginner ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

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>

 

TOPICS
Bootstrap , Code , Error , How to

Views

194

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

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. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

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

 

For responsive images, this is all you need.

image.png

 

<!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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Hello Nancy,

 

Thank you for replying.

 

The version indicates 21.2.

 

I will update to note the difference and report back.

 

Again, thank you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Thank you! Below is what I have done. However, I do not note the ".img-fluid" section for modification. Please advise.

 

@charset "UTF-8";
/* Body */
body {
background-color: #f2f2f2;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
font-style: normal;
font-weight: 200;
}
/* Container */
.container {
width: 90%;
margin-left: auto;
margin-right: auto;
height: 1000px;
background-color: #FFFFFF;
}
/* Navigation */
header {
width: 100%;
height: 5%;
background-color: #52bad5;
border-bottom: 1px solid #2C9AB7;
}
.logo {
color: #fff;
font-weight: bold;
text-align: undefined;
width: 10%;
float: left;
margin-top: 15px;
margin-left: 25px;
letter-spacing: 4px;
}
nav {
float: right;
width: 50%;
text-align: right;
margin-right: 25px;
}
header nav ul {
list-style: none;
float: right;
}
nav ul li {
float: left;
color: #FFFFFF;
font-size: 14px;
text-align: left;
margin-right: 25px;
letter-spacing: 2px;
font-weight: bold;
transition: all 0.3s linear;
}
ul li a {
color: #FFFFFF;
text-decoration: none;
}
ul li:hover a {
color: #2C9AB7;
}
.hero_header {
color: #FFFFFF;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
letter-spacing: 4px;
}
/* Hero Section */
.hero {
background-color: #B3B3B3;
padding-top: 150px;
padding-bottom: 150px;
}
.light {
font-weight: bold;
color: #717070;
}
.tagline {
text-align: center;
color: #FFFFFF;
margin-top: 4px;
font-weight: lighter;
text-transform: uppercase;
letter-spacing: 1px;
}
/* About Section */
.text_column {
width: 29%;
text-align: justify;
line-height: 25px;
float: left;
padding-left: 20px;
padding-right: 20px;
color: #222222;
}
.about {
padding-left: 25px;
padding-right: 25px;
padding-top: 35px;
display: inline-block;
background-color: #FFFFFF;
margin-top: 0px;
}
/* Stats Gallery */
.stats {
color: #717070;
margin-bottom: 5px;
}
.gallery {
clear: both;
display: inline-block;
width: 100%;
background-color: #FFFFFF;
/* [disabled]min-width: 400px;
*/
padding-bottom: 35px;
padding-top: 0px;
margin-top: -5px;
margin-bottom: 0px;
}
.thumbnail {
width: 33%;
text-align: center;
float: left;
margin-top: 35px;
overflow: hidden;
}
.gallery .thumbnail h4 {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
color: #52BAD5;
}
.gallery .thumbnail p {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #A3A3A3;
}
/* Parallax Section */
.banner {
background-color: #2D9AB7;
background-image: url(../images/parallax.png);
height: 400px;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
}
.parallax {
color: #FFFFFF;
text-align: right;
padding-right: 100px;
padding-top: 110px;
letter-spacing: 2px;
margin-top: 0px;
}
.parallax_description {
color: #FFFFFF;
text-align: right;
padding-right: 100px;
width: 30%;
float: right;
font-weight: lighter;
line-height: 23px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
/* More info */
footer {
background-color: #FFFFFF;
padding-bottom: 35px;
}
.footer_column {
width: 50%;
text-align: center;
padding-top: 30px;
float: left;
}
footer .footer_column h3 {
color: #B3B3B3;
text-align: center;
}
footer .footer_column p {
color: #717070;
background-color: #FFFFFF;
}
.cards {
width: 100%;
height: auto;
max-width: 400px;
max-height: 200px;
}
footer .footer_column p {
padding-left: 30px;
padding-right: 30px;
text-align: justify;
line-height: 25px;
font-weight: lighter;
margin-left: 20px;
margin-right: 20px;
}
.button {
width: 200px;
margin-top: 40px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
text-align: center;
vertical-align: middle;
border-radius: 0px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
border: 3px solid #FFFFFF;
color: #FFFFFF;
transition: all 0.3s linear;
}
.button:hover {
background-color: #FEFEFE;
color: #C4C4C4;
cursor: pointer;
}
.copyright {
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
background-color: #717070;
color: #FFFFFF;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: 2px;
border-top-width: 2px;
}
.footer_banner {
background-color: #B3B3B3;
padding-top: 60px;
padding-bottom: 60PX;
margin-bottom: 0px;
background-image: url(../images/pattern.png);
background-repeat: repeat;
}
footer {
display: inline-block;
}
.hidden {
display: none;
}
 
/* Mobile */
@media (max-width : 319px ){
.logo {
width: 100%;
text-align: center;
margin-top: 13px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
float: none;
display: none;
}
header nav ul {
}
nav ul li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
text-align: center;
}
.text_column {
width: 100%;
text-align: justify;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.thumbnail {
width: 100%;
}
.footer_column {
width: 100%;
margin-top: 0px;
}
.parallax {
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 40%;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 100%;
font-size: 18px;
}
.parallax_description {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 90%;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 12px;
float: none;
text-align: center;
}
.banner {
background-color: #2D9AB7;
background-image: none;
}
.tagline {
margin-top: 20px;
line-height: 22px;
}
.hero_header {
padding-left: 10px;
padding-right: 10px;
line-height: 22px;
text-align: center;
}
}
 
/* Small Tablets */
@media ( min-width : 320px ) and (max-width : 479px ){
.logo {
width: 100%;
text-align: center;
margin-top: 13px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
color: #043745;
}
.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
float: none;
overflow: auto;
display: inline-block;
background: #52bad5;
}
header nav ul {
padding: 0px;
float: none;
}
nav ul li {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
text-align: center;
padding-top: 8px;
padding-bottom: 8px;
}
.text_column {
width: 100%;
text-align: left;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.thumbnail {
width: 100%;
}
.footer_column {
width: 100%;
margin-top: 0px;
}
.parallax {
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 40%;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width: 100%;
font-size: 18px;
}
.parallax_description {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 30%;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: none;
width: 100%;
text-align: center;
}
.thumbnail {
width: 50%;
}
.parallax {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-top: 20%;
}
.parallax_description {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%;
padding-top: 30px;
}
.banner {
padding-left: 20px;
padding-right: 20px;
}
.footer_column {
width: 100%;
}
}
 
/* Small Desktops */
@media ( min-width : 768px ) and (max-width : 1279px ){
.text_column {
width: 100%;
}
.thumbnail {
width: 50%;
}
.text_column {
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.banner {
margin-top: 0px;
padding-top: 0px;
}
}

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

LATEST

img-fluid is in your HTML code, but it's missing from your CSS.  So just add it to your stylesheet.

 

There's a lot redundant code that could be eliminated with shorthand.

 

LONG CODE:

==========

.text_column {
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

 

SHORT CODE:

==========

.text_column {
width: 100%;

margin:0;

padding:0;

}

 

Go to DW Preferences, CSS Styles and check the boxes for Shorthand.

image.png

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Apr 20, 2022 Apr 20, 2022

Copy link to clipboard

Copied

Hello again,

 

It seems the version installed is indedd the most recent. Givne so, might the issue rest with the template within Dreamweaver?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines