Responsive Design/Grid Question

I'm using the fluid grid design, and my mobile layout has 5 columns, and some DIVS added - see below:
I'm trying to get my "LEFT PANE" using 2 columns, and my "RIGHT PANE" using 3 columns to the right of the left pane. You can see they are side by side above, but the right pane only takes up 2 columns.
As soon as I make the RIGHT COLUMN stretch to 3 columns, it moves it down below the left column, like below:
What am I doing wrong? Any help/tips/direction appreciated!
Thanks!

Offhand, I'd say you're not keeping your LayoutDivs inside the GridContainer Div. And your floated LayoutDivs are too wide to fit on the same row. There should be some gutter space between them. See screenshot below:
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Similar Messages

How to add multiple presets to responsive design view without having to resize the screen each time

I want to be able to add multiple screen size presets to the responsive design view capability but don't want to have to resize the screen and add each one individually via the custom preset function.
Have seen that some posts on the internet (http://g-liu.com/blog/2013/08/firefox-rdm-presets/) that say this can be done but cannot find where the config is held in ver 26.0?

You can also do the opposite and create custom settings in the responsive design mode window.
You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
This will add the preset to the devtools.responsiveUI.presets pref.
See also my post here for a bookmarklet.
*[[/questions/957590]]
You can paste the current value of the pref in the prompt to see a list of currently defined presets.<br />
You can add a new preset by entering the width,height,name values in the prompt.<br />
Copy the new preset list to the pref.
<pre><nowiki>javascript:(function(){
function rdObj(w,h,n){with(this){key=w+"x"+h;if(n)name=n;width=w;height=h;}}
rdObj.prototype={key:"",name:"",width:"",height:""};
var n={},p='<width>x<height> <name> OR width,height,name',rd=[];
while(p!=null){
p=prompt(p,JSON.stringify(rd));
if(/^(\d{3,4})[,x](\d{3,4})([, ](.+))?$/.test(p)){
n=new rdObj(RegExp.$1,RegExp.$2,RegExp.$4);rd.push(n);
}else{try{rd=JSON.parse(p);}catch(e){}}
}})()</nowiki></pre>

Slideshows in responsive design

Making responsiv designs in Dreamweaver has become easy but if you want to make a webpage with a full page slideshow optimized for ordinary screens and high resolution screens (Retina) you must have images of a rather large size. So if you have images that fit eg. the new 30" Apple Retina display an Iphone must download the same images and downsize them to fit the phone display. What I'm concerned of is the pageload time. I know that Muse automatically downsize images in the different layouts but Muse doesn't do true responsive design. My question is then - is it possible to have the same slideshow pointing to different folders with images of more appropriate sizes?
Or is the solution that you make 2 or 3 slideshows on the same page and then in CSS hide (display: none) the slideshow that is not needed? But if an element is hidden, isn't it loaded anyway?
Or are there other solutions?
Best regards Jørgen

Never tried this myself but I guess appending the images using jQuery based on screen width might work: If screen width is more that 500px the appropriate 'desktop' img is appended to its <li></li> container, else a smaller image is appended to it.
Might be a good reason this won't work just thinking off the top of my head. (I don't know if all the images are download when the document is ready or just those that conform to the screen width.) Someone will have a view.
<!DOCTYPE HTML>
<html>
<head>
<meta ="charset=UTF-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
if ($(window).width() > 500) {
$(".slide_1").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='desktopImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='desktopImages/slideshow_1.jpg' />");
else {
$(".slide_1").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_2").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_3").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_4").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_5").append("<img src='mobileImages/slideshow_1.jpg' />");
$(".slide_6").append("<img src='mobileImages/slideshow_1.jpg' />");
</script>
<style>
ul {
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
list-style: none;
</style>
</head>
<body>
<div id="slideshow">
<ul>
<li class="slide_1"></li>
<li class="slide_2"></li>
<li class="slide_3"></li>
<li class="slide_4"></li>
<li class="slide_5"></li>
<li class="slide_6"></li>
</ul>
</div>

</body>
</html>

Responsive Design

Six months ago I purchased Dreamweaver CS6 to have my site more interactive, i'm new to Web Development. I currently ran into a slight IE 7 & 8 comp ability issue with DWCS6 and CSS3.
My computer system is Windows 7 with IE9, so when testing my new site all went well, until I uploaded and learned about Internet Explorer Developer Tools, which has cross browser mode to test IE 7 & 8 versions.
Unfortunately my site shows phone view first, I’m using Dreamweaver Fluid Grid Responsive Design System, which gives 3-layouts, phone-tablet-desktop.
For the past month my reasearch is circling to no avail, I have tried many methods on the net , but none seems to be working.
I have learned that “html5shiv.googlecode.com/svn/trunk/html5.js" and "respond.min.js”
are not working properly with my site ( in IE 7 & 8).
May I humbly request your assistance with resolution to these issues?
www.angelsbyangels.com
Thank You,
mlfa

It's really a waste of time to make a site responsive for old browsers.
The hacks required are not simple and tend to add to an already bloated
approach by Adobe. Concentrate on modern browsers and, of course, mobile
devices.
Unfortunately, there is little consensus on best practices for
responsive design - primarily because the methods are evolving
constantly. It is very easy to happen upon an out of date article, which
is probably how Adobe developed their Fluid Grid monstrosity
But if you have a problem with a particular page, you really need to
post a link to a live page or it will be nearly impossible for anyone to
help you.
Al Sparber - PVII
http://www.projectseven.com
The Finest Dreamweaver Tools
Since 1998

Chain of Responsibility Design Pattern

Is there any java api which helps in implementing Chain of Responsibility Design pattern by parsing a XML file?. Can I use XML file to do this in Apache Commons Chain API?

A quick look at the javadocs for that project suggest that, yes, indeed they do provide a way to specify a chain of command using XML.
In fact I'm kind of confused why you even asked this question, since you already seem to know the answer.
I've never heard of such a thing in the standard API, if that's what you're asking, probably because it's a simple pattern to implement, and most of the pain of any implementation is likely to be due to details specific to the problem domain, not the pattern.
If you're really eager to use XML, you might want to check out Spring. You could configure a bunch of beans in a chain, if you like.

Cannot Import PowerPoint into Responsive Design Template

Hi,
I have a PowerPoint which needs to be converted to a Responsive Design Project. I notice that when I create a new Responsive design project, the Import PowerPoint is greyed out.
Is this normal?
Also if I create a basic Captivate Project, is it possible to convert it to a responsive project if a client decides they require this, without a complete rebuild?
thanks

It is not possible to import Powerpoint slides in a responsive project at all, seems logical to me but will not bother you with an explanation. The technique, programming is so different. The provided themes are responsive, PPT is not.
Same negative answer for your second question, for the same reason. You can use the assets from PPT, but will have to create your own responsive project.
Lilybiri

Why can I export (and import)the different sizes that I put in the "Responsive Design View"?

Hello
I have troubles when try to import or export the different sizes of the Responsive Design View, I manage at least 13, and it's a little preposterous to add one by one. There are a method that export/import them?
Thanks

There is a way to store custom settings for responsive design.
You can create custom settings in the responsive design mode window.
You can hold down the Shift key and drag the borders via the (right border, bottom border, bottom right corner) resize icons to get specific dimensions and give the current custom setting a name to add them as a preset.
This will add the preset to the <b>devtools.responsiveUI.presets</b> pref that you can inspect on the <b>about:config</b> page.
Those settings are stored in JSON format.
<pre><nowiki>[{"key":"360x640","width":360,"height":640},{"key":"768x1024","width":768,"height":1024},{"key":"800x600","name":"8x6","width":800,"height":600},{"key":"800x1280","width":800,"height":1280},{"key":"980x1280","width":980,"height":1280},{"key":"1280x600","width":1280,"height":600},{"key":"1920x900","width":1920,"height":900}]</nowiki></pre>
See this thread for some JavaScript code to add extra sizes:
*[[/questions/957590]]
You can paste the existing JSON value of the devtools.responsiveUI.presets pref in the prompt and click OK.
Extra values can be added by typing its dimensions (<width>x<height> <name>).
You can paste the resulting JSON value back to the devtools.responsiveUI.presets pref or save it.

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.

Confused Re: Responsive Design Layout

It appears that I missed the change in Dreamweaver's layouts in my recent upgrades. I used to be able to choose php, and I could then choose between single-column, one or two sidebars, with or without headers and footers, fixed, liquid, etc.
Now I have Dreamweaver CC, and I can only choose one or two sidebars / fixed width. If I opt for a Fluid Grid Layout instead, there are no options for headers, footers or sidebars - and it apparently doesn't work with PHP. If I change the extension from .html to .php, then I can't write PHP code in it. (The PHP tags aren't highlighted red, at least.
So I'm thoroughly confused.
I have several websites with a variety of page types. I started experimenting with responsive design some time ago and generally have the hang of it, but I'd like to start fresh with a new layout, which will hopefully fix a few problems. All of my pages have a header and footer. Most have just one column or one sidebar (usually right), but a few have two sidebars.
Anyway, can anyone suggest some good layouts to get me started? (I'm using a Mac with Mavericks and MAMP.)

Geobop wrote:
Wow, Bootstrap looks interesting, though maybe a little intense; kind of like Drupal.
In fact, I've been thinking about upgrading to WordPress or Drupal one of these days, but it looks like Bootstrap does a lot of the things they do.
Bootstrap is just a responsive framework unlike Wordpress and Drupal which are first and foremost Content Management Systems where developers produce 'template themes' - most now responsive.
Bootstrap as far as I'm aware is not a CMS.
If you want good looking out of the box design themes then dive into Wordpress it might be for you. Personally I don't like the bloat you get with it and the code either.

Dreamweaver 14.1.1 Build 6981 working with responsive design

I have uploaded Dreamweaver 2014.1.1 Build 6981. I am working in responsive design. I contacted Adobe Support for help and they took command of my machine and said everything is OK. After complaining about only being able to edit in Live 5% of the time after waiting sometimes about 5 minutes. I was told that's how the new Dreamweaver works and I have to live with it. He would not answer any other questions. Like why have spell check if it does not work? Why have Live button if it only works 5% of the time? Even when you do edit in Code mode it sometimes just jumps to another section of the code? Does anyone have a solution?

Did you have issues working with RWD sites in the previous version (2014.1 Build 6947)? I have not yet upgraded to latest build because they ruined the Welcome window - still using build 6947, and I have no issues working with my own RWD site, or with Bootstrap/Foundation builds in general. Are you using a framework?
There is a really old problem that I'm not sure ever got fixed, where Dreamweaver would hang on opening some web pages, that may now be afflicting Live View. I implement this fix every time I upgrade Dreamweaver, so I usually do not have issues with Live View.... not with the build I'm using that is. Here's the fix: Hang when opening document | Dreamweaver CS5
There is one other issue that caused my mobile apps to freeze up in Live View, and that was the Google Analytics code. Temporarily commenting that out resolved the freeze up.

If Muse does not support responsive design, can someone tell me why I have seen 100% browser width

If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

If muse does not support responsive design (and therefore cannot adapt to the differing sizes in browser width of different devices, so I understand it) , as I have read on these forums and been told by Adobe's support tech's via chat support, can someone please explain how the 100% browser width slideshows that I have seen on Adobe's featured Site of the Day sites, were acheived? Are these sites only able to display correctly on the same size screen? If I cannot create a site in muse that displays a constant design on a laptop, desktop, or tablet screen, then why should I use this program at all, and why isn't that dislcaimer right up front to save folks like me hundreds of dollars in cloud subscription fees and hours designing a site only to find out that it will look like crap on 2 of the three devices any one uses to view it???? I was sent here for this question by the support team at Adobe. Hopefully someone has a workaround, because Adobe apparently are nonplussed.

Set 'Responsive Design View' as a default view

Is there a way to set 'Responsive Design View' as a default view every time I open a page?
Thanks in advance.

Hi lanapetkovic,
Thank you for your question. Currently there is a keyboard shortcut to open up Response Design View.
[https://support.mozilla.org/en-US/kb/keyboard-shortcuts-perform-firefox-tasks-quickly Keyboard Shortcuts in Firefox]
However this is the second question about this, I created a bug to request this: [https://bugzilla.mozilla.org/show_bug.cgi?id=1045785]

Is Responsive Design possible using Liquid Layouts?

Hi it is possible to use Liquid Layouts to automatically move content [instead of just scaling it] when the device is a different size. For example I may have 2 text boxes next to each other on an iPad layout but I want want them stacked on top of each other on the iPhone.
I know this type of responsive design is implemented in the latest version of dream weaver but i'm unsure how to do it in Indesign.
I have attached an image to better describe my question - http://bit.ly/16c82bD
Thanks

@Luke – currently the answer is no.
I think in this regard the development team of InDesign has to go a really long way (if it will be ever implemented).
It means CSS rules for every part of formatting:
A new paradigm for layout composition (and text composition as well).
Uwe

Need Recommendation on converting existing site to responsive design in ATG 10.1.2

Hi,
We have a site developed for a client which is build using CRS 9.0. We need to convert the website to responsive design using bootstrap framework version 3.4. The HTML prototypes have been design by UI designer using bootstrap. Does anyone have experience in doing similar work and can suggest guidelines/recommendations to make this migration easier/faster?
Thanks

Hi,
Have you had a look at
https://support.oracle.com/rs?type=doc&id=1563355.1
Oracle Commerce and Responsive Design White Paper (Doc ID 1563355.1)
++++
Thanks
Gareth
Please mark any update as "Correct Answer" or "Helpful Answer" if that update helps/answers your question, so that others can identify the Correct/helpful update between many updates.

Responsive Design using Dreamweaver CC

Hello,
I would like to know if we need to include additional mark up, besides having width in % in CSS3, to make our websites responsive.
Kindly advise if there is a tutorial that can guide us step by step how to make a Responsive Website.
Thank you

It's not that you really need additional mark-up, there will be a little additional when compared to a static site in general, but more importantly the structure of your html needs to be created in a "responsive-ready" fashion in order to take full advantage of the power of CSS Media Queries. It takes a little planning from the get go, that's why converting sites from a static layout to responsive can be pretty difficult and time consuming enough to where simply starting over would be better than attempting any conversion.
Here are a few links that give a lot of info on how to create responsive sites with CSS Media Queries...
Introduction to media queries – Part 1: What are media queries? | Adobe Developer Connection
Introduction to media queries – Part 2: Building a responsive design | Adobe Developer Connection
Fluid Grids: Creating Adaptive Designs Using Fluid Grid Layouts in Dreamweaver CS6 | Digital Design CS6 | Adobe TV
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/

Responsive Design/Grid Question

Similar Messages

Maybe you are looking for