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>

Similar Messages

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

"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.

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

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.

Need help on responsive layout

Hi Folks,
In order to make the SAPUI5 application responsive in nature, we are trying to use ResponsiveFlowLayout/ResponsiveLayout/ResponsiveGridLayout as per the details available in below links. But, in this case the sample code are done via JS view, so how is possible via XML view?
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveGridLayout.html
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveLayout.html
https://sapui5.hana.ondemand.com/sdk/test-resources/sap/ui/layout/demokit/ResponsiveFlowLayout.html
Regards,
Diptanu

Hi Diptanu,
Refer to the below sample code:
<mvc:View height="100%" xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="my.own.controller" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:c="sap.ui.commons" xmlns:layout="sap.ui.layout">
   <Page title="Layouts">
    <form:SimpleForm id="myForm" minWidth="1024" layout="ResponsiveLayout">
     <form:content>
      <Label text="Name">
       <layoutData>
        <layout:ResponsiveFlowLayoutData weight="12"></layout:ResponsiveFlowLayoutData>
       </layoutData>
      </Label>
      <Input value="Responsive Layouts">
       <layoutData>
        <layout:ResponsiveFlowLayoutData weight="8"></layout:ResponsiveFlowLayoutData>
       </layoutData>
      </Input>
     </form:content>
    </form:SimpleForm>
   </Page>
</mvc:View>
Hope this helps!
Regards,
Anusha

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.

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

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

Responsive scaling of Edge Animate composition in Dreamweaver Fluid Grid Layout

I have created an animation in Edge Animate and have placed it in the header of a Dreamweaver Fluid Grid Layout. I have put it in a div by itself so it can be turned off in the mobile layout. When I test the layout in a browser, the Edge Animate composition scales responsively to the window size, but the height of the div it is in does not. The width of the div changes with the width of the window, but the height of the div remains the same. Because the height of the div doesn't change, as the animation responds and resizes it leaves a large empty space between the bottom of the animation and the content that follows it on the page.
The div itself does not have a rule for it's height associated with it. It seems to me that the div is getting its height from the original size of the html object which is the animation. I tried removing the height rule for the object, but then the div clips the bottom of the animation, and again, it doesn't resize with the window.
Is there a way I can get the div's height to resize with the size of the animation as it changes?

Thanks for your reply. You're right about most people not resizing their viewport during a session, but unfortunately the problem exists whether the screen is being resized or not. Refreshing the screen doesn't solve the problem.
The width of the div adjusts to the width of the screen as expected and the Edge Animate composition inside it does too, but the height of the div doesn't adjust. As the animation gets smaller to fit the width, the height of the div that contains it remains the same, leaving empty space at the bottom of the div. What is needed is for the div to scale to fit the page width proportionally. Instead, only the width is adjusting.
So I guess I need to know if there's either a way to force the div to scale proportionally or a way to tell it to adjust to the animation that it contains.

Creating Responsive Layouts in Reflow | Adobe Edge Reflow | Adobe TV

The true power of Reflow is not only designing and creating layouts using CSS, but the ability to have those layouts respond to different screen sizes. From desktop to tablet to mobile. Evangelist Paul Trani takes you through how to take an initial layout, add breakpoints and modify that layout to your liking for all the various screen sizes you'd like to target. Download Adobe Edge Reflow Preview from the Creative Cloud today and give us your feedback through the Adobe Forums or on Twitter: @Reflow @PaulTrani
http://adobe.ly/Y7cXmM

This is really nice, but how does it fit into the workflow in creating and editing a web site? I'd like to see an example of what you do with it once you've created a beautiful re-flowing page.

How do I get the Function bar to appear in my responsive layout?

Running 11.0.3.268, with the latest hotfix.
When I customize my layout, I see options for a Function bar. (Home button, Print button, Back and Next buttons, etc.) When I generate my output, however, I do not see any of these items. What do I need to do to make these button appear?

Thank you. Apparently my screen resolution was too low for the Function bar to display.
Is it possible to adjust screen dimension break points for the Responsive HTML5 Help layouts? I see the Screen Profiles on the Project Set-up tab, but they seem to be only for Multiscreen HTML5 output.

How to center wireframe layout in browser window

HELP!!
I've created a set of wireframes for a website in Proto but when I bring them up in a browser window the layout is always left aligned and I cannot figure out how to get the layout to center in the browser window.
I've used margin: 0 auto; on the container div but it does no good, the layout stays left aligned. I'm about to pull my hair out on this one.
The URL is http://www.bluegrasswebservices.com/kpp/index.html
Thanks for your help
Gary

I had the same issue and decided to make the change myself. All you have to do is add a wrapper div, match it to the width of your file and center it via CSS. It would def be much more convenient to have this as an option, but alas your solution is below....
HTML
<div id="wrapper">
Your page content
</div>
CSS
#wrapper{
    width: (width of your content);
    position: relative;
    margin: 0 auto;

Center responsive layouts in Edge

Similar Messages

Maybe you are looking for