How do you make Dreamweaver responsive site 'snap' from one layout to another?

Hi Everyone,

I am slowly getting the hang of HTML and CSS (just scratched the surface really). I am using the trial of Dreamweaver CC. I currently have two things I am trying to figure out.

I have created a responsive site using DW’s new responsive layout maker thing. At each of the breakpoints my site looks ok to me BUT as I resize my browser window and the width reduces to near the next breakpoint, I don’t like the squashed appearance.

My first question is: can I make my site snap from one layout size to the next without constantly adjusting as the window width is changed? This would enable me to have just three possible ‘looks’ for my site. I have seen some responsive sites do this but I can’t remember what they were.

My second question, which is off topic, is I am trying to insert a full size iFrame onto a page. I want to insert a wordpress blog page. I have created a div which is set to full width and inserted an iframe. When I view the page the iframe is small, about 300 pixels wide. How can I make it full width and auto height?

Thanks for you help and in my previous post.


Why would you not want the layout to constantly re-adjust itself? The idea behind responsive design is to create something is functional and easy to use on any device or screen size, if you cater to only 3 sizes and leave everyone else out, then those people will have horizontal scroll bars and your site won’t be fully responsive.

I’ve never used DW’s responsive layout maker thing that you’re talking about, but if it involves generating any code for you, avoid it. More often than not the code it generates is poor, and more importantly you’ll be in constant situations like this, where you don’t know how to maintain and modify it. Do it manually, read about media queries and how they work, and you’ll find the answers to these questions naturally. Ideally, avoid Dreamweaver altogether, but that’s a separate topic.

Thanks for the reply.

The reason I wanted the site to ‘snap’ from one size to another is that on one page I have four columns of text. As the browser window narrows the text columns look too squashed and I don’t like the appearance. To avoid this situation I thought it would be best if the site would not be allowed to narrow so much before it alters layout.

Regarding DW, it creates three layout sizes (desktop, tablet, and mobile) with fixed breakpoints. According to my ‘Missing Manual’ book, these cannot be altered without breaking DW’s layout system.

Your advice to ditch DW sounds good to me as I can envisage a situation where I am tied to the software. I was previously in this position with Serif WebPlus which is easy but not good code apparently. So far I have been using design and code view in equal measure, realising that code view is beneficial for learning. It would be nice to stop using DW as so far I reinstall windows from a restore image when the DW trial ends then reinstall the trial.

With a responsive site how would you ensure the site always looks exactly as you wish? Do you create lots of breakpoints to avoid squashed content or maybe even layout the content so that squashed columns would not exist?

Do you design your perfect layout and then make it responsive or do you design the layout so that it lends itself to being responsive in the first place?

Does that make sense? :slight_smile:

you can create design responsive through reduce un essential code and make the website easy that should open faster with device compatibility