Skip to main content
P
Partij Voor D25364323sh71
Participating Frequently
September 21, 2022
Answered

having issue with fluidgrid DW CS6 ,regarding responsive embedding

  • September 21, 2022
  • 2 replies
  • 2370 views

Hi, 

 

so this is all the code I am using, at the bottom of each segment you can see the part I just made relating to responsive embedding, I named it videoWrapper and videoWrapper iframe:
uet if you go to this link https://onvermijdelijk.nl/TheThirdTemple.html we do not see any responsiveness. whereas on my local device we see responsiveness, but with an bug...namely that for mobile it jumps out of the screen.
all and all, I'm stuck. I hope someone here knows what to do.

@charset "utf-8";
/* Simple fluid media
Note: Fluid media requires that you remove the media's height and width attributes from the HTML
http://www.alistapart.com/articles/fluid-images/
*/
img, object, embed, video {
max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
width:100%;
}

/*
Dreamweaver Fluid Grid Properties
----------------------------------
dw-num-cols-mobile: 11;
dw-num-cols-tablet: 17;
dw-num-cols-desktop: 21;
dw-gutter-percentage: 25;

Inspiration from "Responsive Web Design" by Ethan Marcotte
http://www.alistapart.com/articles/responsive-web-design

and Golden Grid System by Joni Korpi
http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */

.gridContainer {
margin-left: auto;
margin-right: auto;
width: 89.3454%;
padding-left: 0.8272%;
padding-right: 0.8272%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 14px;
color: #FFF;
padding-top: 5px;
padding-bottom: 18px;
}
#body {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 12px;
color: #FFF;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
color: #FFF;
}
#Misc-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-title {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-omschrijving {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#Minister-image {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#select-nation-flag-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#videoWrapper {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {
.gridContainer {
width: 91.9058%;
padding-left: 0.547%;
padding-right: 0.547%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 18px;
color: #FFF;
padding-top: 5px;
padding-bottom: 18px;
}
#body {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 18px;
color: #FFF;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 16px;
color: #FFF;
}
#Misc-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-title {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-omschrijving {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#Minister-image {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#select-nation-flag-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#videoWrapper {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1428%;
max-width: 1563px;
padding-left: 0.4285%;
padding-right: 0.4285%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#navigation {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
color: #FFF;
font-size: x-large;
padding-top: 7px;
padding-bottom: 22px;
}
#body {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 22px;
color: #FFF;
}
#footer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: "Sitka Banner";
font-size: 22px;
color: #FFF;
}
#Misc-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-title {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#minister-omschrijving {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#Minister-image {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#select-nation-flag-nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#videoWrapper {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
position: relative;
padding-bottom: 56.25%;
height: 0px;
}
#videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}

    This topic has been closed for replies.
    Correct answer osgood_
    quote

    I'd use vue.js with Astro static site generator, way to go, no on second thoughts ld use Tailwind. Forget that use React, no wait a minute l think Alpine would be more suited, perhaps php, hang on node maybe, vanilla not possible of course, out of the question, no wait next.js is quite good lm told.......blah blah blah. How the hell did a simple process become so ridiculously stupid.


    By @osgood_

     

    What a meager list of alternatives. Is this all you have got?

     


    quote
    quote

    I'd use vue.js with Astro static site generator, way to go, no on second thoughts ld use Tailwind. Forget that use React, no wait a minute l think Alpine would be more suited, perhaps php, hang on node maybe, vanilla not possible of course, out of the question, no wait next.js is quite good lm told.......blah blah blah. How the hell did a simple process become so ridiculously stupid.


    By @osgood_

     

    What a meager list of alternatives. Is this all you have got?

     


    By @BenPleysier

     

    It's laughable when 2 lines of css would solve the OPs problem and yet a complete re-construction is being suggested by some people. I guess that's what happens when you become too dependent on a specific workflow, it stifles one's ability to think sensibly.

     

    Even if DW is EOLed it won't stop working and you could get another 3/4/5 years out of it depending where you are in your OS life-cycle. In the mean time, yes, one could be looking at a more robust solution.

     

    It's this pathetic approach of 'oh well the website doesn't use Bootstrap, so it isn't going to work mentality that concerns me, it's like being amongst a lot of brain dead zombies at times.

     

    2 replies

    B i r n o u
    B i r n o u
    Community Expert
    September 21, 2022

    @Partij Voor D25364323sh71 are you ArrrMada addict 😉

      Nancy OShea
      Nancy OShea
      Community Expert
      September 21, 2022

      There's not much to say.

      1. CS6 is outdated software from 2012.  Browsers & devices have changed a lot in 10 years.

       

      2. Adobe abandoned FluidGridLayouts and replaced it with Bootstrap's mobile-first framework.   At best, FGL was flawed and way too temperamental.  At worst, it was a disaster.  I stopped using it.  I can't recommend it for production use in 2022.

       

      Below is a working Bootstrap demo with responsive embeds from YouTube  -- 4 examples at different aspect ratios. Copy & paste code into a new, blank document to test.

       

      <!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video ~ version 4.5.2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS on CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Brand/Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link</a> </li>
</ul>
<!--Search form-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="jumbotron mx-auto text-center">
<h2>Bootstrap 4.5.2</h2>
<p>Responsive video embeds. </p>
</div>
</div>
<div class="row">
<div class="col-lg-6">

<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col">
<footer>Footer goes here.... </footer>
</div>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

       

      Bootstrap tutorials:

      https://www.w3schools.com/bootstrap4/

       

      Nancy O'Shea— Product User, Community Expert & Moderator
        P
        Partij Voor D25364323sh71Author
        Participating Frequently
        September 22, 2022

        Hi Nancy,
        can I just paste this code into the exsisting master.css

         

        Nancy OShea
        Nancy OShea
        Community Expert
        September 23, 2022

        Hello Nancy,

        I am still not able to get it to work. I hope this screenshot will help out in seeing the error. As I do not see the error, maybe you can put a red outline or something where the error is.

        furthermore I am now asking myself how to replace the fluidgrid master.css with the bootstrap. or do I need to start from zero and build the site again? www.onvermijdelijk.nl is the index and all the pages with .html are made from the same template

        thank you.


        Start over with a Bootstrap Document.   Discard FluidGrid.  It's rubbish.

         

        <!doctype html>
<html lang="en">
<head>
<title>YOUR UNIQUE PAGE TITLE HERE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS on CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

YOUR PAGE CONTENT GOES HERE....

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

         

         

        Nancy O'Shea— Product User, Community Expert & Moderator
        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices