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
        P
        Partij Voor D25364323sh71Author
        Participating Frequently
        September 22, 2022

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

         

        O
        osgood_
        Brainiac
        September 23, 2022

        last comment before I hear back from you.
        The way the bootstrap template works, as you provided it, leaves me no desire to actually use it. The fluidgrid setup I have made works fine and leaves you that, imo, stupid hamburger menu thing. 

        So there must be a better solution. Poeple may say bootstrap is better than fluidgrid, I do not share this view. when you look at our index page www.onvermijdelijk.nl you can see that the logo at top is very nice and fluid. this Bootstrap template does not give me the same capability or does it? if it does, great.

        So in the end, all we want is for the site to be as it is, but than also with responsive emdedded videos. 
        Again, when looking at this page https://onvermijdelijk.nl/TheThirdTemple.html you can clearly see it works fine. it is only when we get to small screen it crashes. There must be a error in the code. but I do not see it. if you could help me fine the erro in the code I would not need to reinvent the website, just to get bootstrap responsiveness. Fluid grid works fine. Or atleast it should work fine. I am convinced there is a small error in the code. As my desktop shows the same error as my phone. Namely when the screen size is in the area of the mobile settings, the embedded clip jumps out of the rule and takes over the page. As you can see in screensshot 3, 1 and 2 show it is fluid. yet also show that the text does not get smaller, as it should according to the css code. So there is clearly a few errors in the code. I do not have enough understanding to see them. But I now think to understand what you said, that the fluidgrid was broke from the beginnen. It looks like DW CS6 was shipped with flawed fluidgrid code. In essence all that is required is that somebody with knowhow fix the fluidgrid master.css bugs/ errors and publish the corrected code here at Adobe in the appropriate section. and Here for starters 🙂 😄 
        here are the screenshots:


         

         

        Add the 2 lines of css shown below in red to your '480px and below media query: - /*Mobile Layout: 480px and below.*/

         

        #videoWrapper {
        clear: both;
        float: left;
        margin-left: 0;
        width: 100%;
        display: block;
        position: relative;
        padding-bottom: 56.25%        ;
        }

         

        The other 2 media queries will inherit these properties. No need to keep duplicating the same css over and over again for each media query BUT I guess that is the way fluid-grids automated the workflow.

         

        Fluid-grid is now considered a poor choice to use for responsive constructions and has been removed by Adobe and replaced with Bootstrap but I wouldnt consider using Bootstrap either. These days it is way too easy to create responsive structures without the aid of any frameworks.

         

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