cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Exit
search
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0
Upvote

having issue with fluidgrid DW CS6 ,regarding responsive embedding

Partij Voor D25364323sh71
Community Beginner ,
Sep 21, 2022 Sep 21, 2022

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%;
}
}

2.1K
Translate
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

correct answers 2 Correct answers

osgood_
LEGEND , Sep 23, 2022 Sep 23, 2022 
 

 

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 fo

...
Translate
osgood_
LEGEND , Sep 24, 2022 Sep 24, 2022
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 li

...
Translate
replies 30 Replies 30
latest latest Jump to latest reply
Nancy OShea Community Expert
Community Expert ,
Sep 26, 2022 Sep 26, 2022
In Response To osgood_

I don't know about not caring.  I think it has more to do with Creative Suite's advanced age.  The aging activation servers are unpredictable.  When they fail, they fail.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
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
BenPleysier Community Expert
Community Expert ,
Sep 26, 2022 Sep 26, 2022
In Response To osgood_
quote

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.


By @osgood_

 

So, you are suggesting changing two lines of code in deprecated, non-industry standard framework facilitated by an EOL software as an answer to the OP's problem.

 

I guess that is what happens when one's blinkers are not removed, it stifles one's ability to think.

 

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Translate
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
osgood_
LEGEND ,
Sep 27, 2022 Sep 27, 2022
In Response To BenPleysier
quote
quote

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.


By @osgood_

 

So, you are suggesting changing two lines of code in deprecated, non-industry standard framework facilitated by an EOL software as an answer to the OP's problem.

 

I guess that is what happens when one's blinkers are not removed, it stifles one's ability to think.

 


By @BenPleysier

 

There is no framework being used to create the page in question, why don't you actually look at the code before you jump out of your pram.

Translate
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
Nancy OShea Community Expert
Community Expert ,
Sep 23, 2022 Sep 23, 2022
In Response To Partij Voor D25364323sh71

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
Translate
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
Nancy OShea Community Expert
Community Expert ,
Sep 23, 2022 Sep 23, 2022
In Response To Nancy OShea

Code for responsive video.  Insert in your <body> tag.

<div class="container-fluid">
<div class="row">
<div class="col mx-auto">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/watch?v=iF3kjr9_nRE&t=1s"></iframe>
</div>
</div>
</div>
</div>

 

Hope that helps.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
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
B i r n o u Community Expert
Community Expert ,
Sep 21, 2022 Sep 21, 2022

@Partij Voor D25364323sh71 are you ArrrMada addict 😉

Translate
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
Copyright © 2025 Adobe. All rights reserved.
Using the Community Experience League Terms of Use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices