Responsive Layout and Lightboxes

Can an Adobe employee please help us understand when we can see responsive lightboxes in Muse? It's a huge problem and it's going to make a lot of people look for another web solution.
After troubleshooting my portfolio site with adobe tech support I need to size images and the lightbox content for a 13" laptop resolution to make sure everyone views the content correctly. That means these images will look incredibly small on larger resolution monitors and laptops... all because we have to cater to the worst scenerio.
This feature is dire for all designers out there. Please, please, please, help get this out asap.

How is the video embedded? Can you play the video from Kindle Fire when
it is not embedded in the page?
A quick Google search shows up a lot of problems on Silk with video.
Since it works on other browsers, I suspect that the Kindle is culprit here.
Kind regards,
Willam

Similar Messages

Responsive layouts and expanded form options

I love that paralax scrolling has been added to Muse. Responsive layouts and allowing uploads in forms would be top of my list for upgrades. Appreciate how far this program has come from it's first beta release, keep it up.

Unfortunately there is no feature for creating Formscentral Forms that behave the way DW fluid grid design elements do. Basically Formscentral outputs HTML for one size form only. You can embed this HTML in your DW site and play with the fluid grid settings but as far as Formscentral is concerned you can only specifiy one size form at design time.
Andrew Yarborough

I generated responsive layout and my mp4 videos do not play in kindle Fire

They play on all other devices. This is Kindle Fire 7" HD

How is the video embedded? Can you play the video from Kindle Fire when
it is not embedded in the page?
A quick Google search shows up a lot of problems on Silk with video.
Since it works on other browsers, I suspect that the Kindle is culprit here.
Kind regards,
Willam

Responsive layout design

Hello dreamweavers.
I have a question regarding responsive layout which is regarding to dimensions, I see a lot of post on the net with does and don'ts, that's why I'm asking for a
more professional and formal advice. So my question is, if I set up a design page for example 1400 width x 1000 height or 1600 width x 1400 height, would both
dimensions be able to be coded responsive in order to take up all devices? can a web designer make it responsive regardless its layout dimensions ir is there a specific dimension when it comes to responsive layout,
and what would that be?
Thank you.

inquestflash wrote:
Thanks for the information Nancy. Just one more thing Id like to ask. Would setting up as default dimensions the 960 GRID system be ok, and then
the developers can use % for the rest of the devices?
Yes,
Set a container wrapper to max-width: 960px;
Like:
#containerWrapper {
max-width: 960px;
width: 96%;
margin: 0 auto;
Any screen which has the real estate to accommodate 960px width will get that. As the screens real estate gets narrower the design adjusts to suits its width.
Obviously if you just have a one column design that's the job done but you will no doubt have multiple columns so you then need to use media queries to change the properties of the css as the browser window becomes narrower to make the design look nicer.

How to preserve aspect ratio with a responsive layout?

Hi,
I have an image that I need to place in the centre of my stage.
The image is that of a ball and has 400px by 400px size.
I want my animations to be responsive so that the image will scale but still maintain the correct aspect ratio.
Currently if I set pixels to % on width and height, the image stretches.
How do you do this in EA?

Hi Jahandaniel,
I have tested responsive layout and it worked perfectly. Please check the following adobe tv article and let me know your result.
Creating a Responsive Layout | Learn Edge Animate | Adobe TV
Regards,
Devendra

Responsive layout template problem

I created a master page with a responsive layout and then saved as template.
I then went to assets and created "new from template" a new page.
When I save this page as index.htm I get the following error message:
Making this change would require changing code that is locked by a template or a translator. The change will be discarded.
Pressing OK then brings up another error box with the following message:
While executing onLoad, the following JavaScript error(s) occurred:
At line 591 of the file "c:\program files (x86)\Adobe Dreamweaver CS6\Configuration\Commands\dmxUpdateHead.htm":
The object is not currently contained in a document.
My website files being developed are on F: drive so I guess this is something to do with the system files.
USING CS6 / BOOTSTRAP2 / WINDOWS 7
No idea what to do... Welcome any advice.
Thank you in advance for feedback
Terry

You will get this problem because Automatic File Update has been selected. Click the checkbox to unselect and all is well.
The reason is that the Bootsrap extension tries to refresh the association of the necessary files and the template system rejects this because the associations are located in a non-editable area.
The above dialog can be found by clicking Commands->DMXZone Bootsrap Options.

"Use presets for responsive layout" not working in Chrome

I am building a responsive website. I am going to have parts of the website animated using Edge Animate. I will make the animation and then insert it into a div in the responsive website I am building.
The Adobe Edge animation has a width of 100%, so that it resizes according to the area that it occupies the full width of the div no matter how wide that div may be in px.
It is all working fine, but:
I have an image in the Edge animation that is center aligned. It must stay center aligned no matter what width the animation ends up being.
Within Adobe Edge, in Properties, in Position and Size, there is a option where, if you hover your mouse cursor over the top right button a tool tip says "Use presets for responsive layout"
With the image on the stage selected, I can click on the "Use presets for responsive layout" button and then choose "Centre background Image".
It works perfectly in all browsers accept Chrome (even IE is playing ball this time). In chrome the width of the image stretches out as the div stretches out..
The "Centre background Image" setting says that it won't scale the image. But in Chrome it does.
What can I do to "tell" Edge Animate to center the image but not scale it in the Chrome browser?
I can see that in the image properties it is set to Background image x axis and y axis 50%. And the width is set to pixels. But in Chrome, the image stretches.
If you go to http://www.brainstormadvertising.co.uk/demo/services.html you will see what I mean. The circle image is centering BUT stretching in chrome browsers while centering nicely and NOT stretching in other browsers.

Thank you for your reply Josh. But the point of this setting in Edge Animate is that you can set it up that the background image is center aligned and does not scale. Yet it produces code that gives the width as 21.72%.
A little further along I see background-size: 48px; . This is correct.
So all the browers are reading background-size: 48px; as the scale measurement but Chrome is reading the width only, not the background-width. So this "Use presets for responsive layout" works in all browsers except chrome.
I don't know how to change that code after the artwork has been published. I can see the code using Firebug, but where do I change it in my code on my computer before uploading to the server?
I have reported this bug to Adobe.
Please see the attachment. You can see where all the settings are made and where I am getting a problem.

In Initial View, can you set defaults for Navigation tab, Page layout, and Magnification?

Adobe Acrobat 9 Pro V9.4.0
Win7 Pro x64
Problem: In Initial View, can you set defaults for Navigation tab, Page layout, and Magnification?
Every time Acrobat scans a document, I have to go to Initial View to set Navigation tab, Page layout, and Magnification. It does not remember the settings I last used.
Thanks in advance.

See my response to this post

Tables colpsan rowspan vs Div in a responsive layout

Hi all
I am new to web design and was wondering can you use tables in a responsive layout?
All I need is a website layout that you can view in a tablet and PC for I've already have a mobile site
Thanks everybody

Tables are for tabular data only -- spreadsheets and charts. They are not well suited for web page layouts of any kind. Tables pose several challenges in Responsive Web Designs. I try to avoid using them if I possibly can mainly b/c they stop resizing on smaller viewports. Boostrap offers a few ways to present tables responsively -- with collapsed regions and/or horizontal scrollbars.
http://elvery.net/demo/responsive-tables/
Another option might be to create a pseudo-table with Definition Lists.
Pseudo-Tables with Definition Lists - JSFiddle
Nancy O.

Presets for responsive layout

Hi there,
I was doing a tutorial and when arrives the moment to use the presets for responsive layout, the guy on the tutorial has 6 presets and I only have one...
Does anyone know how can I get those presets?
Thanks!

Thats because you have a Stage > Symbol selected.
The tutorial you reference most likely has an image asset selected: which will reveal 6 Layout Presets.
So in your case, if your symbol 'houses' an image you want to apply one of the six Layout Presets, then you need to be in Symbol Edit Mode: simply double click directly onto the Symbol to enter Edit in Place. Then select the image, then choose from the Preset selector.
Hope this helps
Darrell

DW CC Responsive Design and BC tags

Hi All,
I am going through the recent Adobe tutorials on Responsive design using DW CC and I have a couple of questions.
Has anyone tried setting up a DW CC responsive design for a BC site yet, using the new functionality in DW CC?
Is it OK to insert BC module tags into a design, ie a tag for a menu, and will they work? Or will the BC module javascript clash with the responsive javascript?
Also, the tutorials talk about coding up webpages to be responsive, where I will be wanting to code up a template as being responsive, with the BC tag_pagecontent tag inserted where the content is going to be.
Also with the tutorials so far I am having problems doing the following:
- inserting two divs inside another div with a large background image and positioning these two divs over this background div.
Anyway, I am continuing to work away at rendering my design into a responsive layout, following the recent Adobe videos.
If anyone else had/is doing the same please let me know how you went.
PS. I am only interested in replies about using DW CC to create a responsive design, as I am not able to hand code that kind of thing from scratch in Notepad. lol!

Mary,
Have you had a look at using a framework. Responsive frameworks include:
Twitter Bootstrap - http://twitter.github.io/bootstrap/
Skeleton - http://www.getskeleton.com/
Foundation - http://foundation.zurb.com/
We had a discussion on Sandpile yesterday about using Frameworks. Recording here: http://experts.adobeconnect.com/p6hmzy2oipt/
Also, Scott did a presentaion on Responsive design : http://experts.adobeconnect.com/p4ryiohpfjs/
Hope this helps.

Unable to draw AP Div from Insert Panel as described in Tutorial "Classroom: Basic Site Layout and Navigation in Dreamweaver"

I tried to perform the draw AP Div from the Insert Panel as described within the Tutorial "Classroom: Basic Site Layout and Navigation in Dreamweaver" but that option isn't available/visible from my most recent update t Dreamweaver CC. The only thing noticeable is that the instructor is using a Mac version of the software. Help!

CS4 is 6+ years old. A lot has changed in web standards and Dreamweaver since then.
APDivs were never a good or sensible way to make primary layouts. Today, they are downright impossible in Responsive web designs because content in APDivs is removed from the normal document flow. See links below for further details on why APDivs should be avoided.
http://www.apptools.com/examples/pagelayout101.php
http://css-tricks.com/css-beginner-mistakes-1/
If you're going to work with DW CC, you need to find tutorials to match your product version. CS6 is wildly different from CC and CC 2014.
Creating your first web site in DW CC-
https://helpx.adobe.com/dreamweaver/learn/tutorials/how-to/first-website-part1.html
Nancy O.

Create a photo montage showing responsive layouts

Hello,
Photoshop forum suggested I move over to the DreamWeaver forum for this. I am a web designer. I'd like to show a thumbnail view of the responsive sites I've created on my own website that shows a particular site (using the actual URL) in a montage of different responsive layouts. It's a common montage. Is there a way to generate this using a URL, some tool or software? I do not want to create a slideshow. I first went to Photoshop because one company told me that's what they used to create this. I'd like to keep it simple and have Googled exhaustively to no avail.

There is an extension for Google Chrome that takes responsive captures.
Webpage Screenshot - Chrome Web Store
Online Service -- you enter your URL and set the breakpoint (viewport size)
Responsive Capture - free full screenshot service
Another online service -- makes various responsive previews to show your clients
deviceponsive.com/
Nancy O.

Why I cannot preview my responsive layout project with captivate 8?

I can not preview my responsive layout project in captivate 8. It just stop on the first page. Can anyone help?

Hi,
Do you get the issue every time you create a responsive project? Can you just crease 2-3 slides with smart shapes and text caption; publish and check if there is still any error?
There are chances that the issue might be with the browser, which browser are you using to preview the content?
Chrome version 36 has similar issues with captivate html5 output. Please find the following workaround if you are using Chrome.
http://blogs.adobe.com/captivate/2014/07/update-on-captivate-html-5-content-playback-issue -in-google-chrome-browser.html

Center responsive layouts in Edge

Hi,
I would like to center a responsive layout, which I have done.
With that code it works, but only when the width of my layout is fix:
$("#Stage").css("margin","auto")
But I want a flexible width, (I am using stage width in % not in px) and then the
code is not working anymore.
I need this flexible width, because I am loading in a container which is positioned on the stage
three different layouts with 320px, 600px and 1200px-width.
yepnope ({
load: "libs/EdgeCommons.js",
callback: function (){
EC.setAdaptiveLayouts(
[320, 600, 1200], sym, "adaptiveContainer"
These layouts I have created in Symbols.
is it possible to center these different layouts/symbols?
Can anyoune help me with that?
Many, many Thanx!!

If you just want to center a div, here is an example how to do it in css:
<!DOCTYPE html>
<html>
<head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
          <title>test</title>
    <style>
    html, body {
        margin: 0px;
        padding: 0px;
        #Stage {
            background-color: #ff0000;
            margin: 0 auto;
            width: 900px;
            height: 200px;
    </style>
</head>
<body>
          <div id="Stage">
          my content here
    </div>
</body>
</html>

Responsive Layout and Lightboxes

Similar Messages

Maybe you are looking for