Skip navigation
Currently Being Moderated

Dreamweaver CC fluid grid, can I change the position of DIV's based on Mobile, Tablet, Desktop view?

Sep 12, 2013 7:17 PM

Hi all,

Currently working on my first Dreamweaver CC fluid grid / responsive site. I want to optimise the pages layout for Mobile, Tablet and Desktop.

 

I can see that I can hide individual div elements by adding "display: none;" to the mobile media query code in the CSS.

 

I am wondering am I able to change the position of DIV's in relation to the order of each other some how using a similar way?

   

Eg I have a webpage design for desktop like.

 

Title

Nav

Description

Buy Button

Photo

   

On mobile I'd like to be able to bring that Photo up towards the top of the layout eg.

 

Title

Nav

Photo

Description

Buy Button

 

I was hoping those up and down arrows you see in the Dreamweaver CC interface was going to some how make the changes to each view Mobile, Tablet, Desktop, but all that is doing is moving the position of code in the HTML amoung each of the main DIV sections.

   

Or am I at the point where I will need to create a seperate page for mobile only to make a layout change like this?

 

Any help would be great

 
Replies
  • Currently Being Moderated
    Sep 12, 2013 7:37 PM   in reply to complexity

    Or am I at the point where I will need to create a seperate page for mobile only to make a layout change like this?

    Never!

     

    Play around with the CSS so that you can show/hide elements using media queries.

     

    This may help http://www.adobe.com/inspire/2013/02/responsive-web-design.html

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2013 11:01 PM   in reply to Ben Pleysier

    As Ben mentioned do not create a new Mobile only site

     

    I would suggest you two ways

     

    Order the elements as below

    1. Title
    2. Nav
    3. Photo/*Hide in mobile layout */
    4. Description
    5. Buy Button
    6. Photo/* Hide in desktop and tablet layouts */

     

    or use flex order methods to order the photo above the Description and buy buttons

     

    .order

    {

    -ms-flex-order:1; /* Internet Explorer 10 */

    -moz-box-ordinal-group:1; /* Firefox */

    -webkit-box-ordinal-group:1; /* Safari and Chrome */

    box-ordinal-group:1;

    }

     

    However , you will have to look into the Browser support for the flex-order property

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 12, 2013 11:15 PM   in reply to vharis

    Totally forgot about Flexbox, it could be a great alernative.

     

    The bad news: not supported in IE<10

     

    The good news: I know of no one that has succesfully used IE<10 on a mobile device.

     

    For more info see http://css-tricks.com/snippets/css/a-guide-to-flexbox/

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 13, 2013 11:27 AM   in reply to complexity

    While I agree that CSS Flexbox is the way forward, AFAIK it doesn't work in FluidGridLayouts without a lot of manual coding.  God only knows how DW would react to Flexbox code inside FGLayouts <shudder>. 

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2013 12:01 AM   in reply to complexity

    Hi Complexity,

     

    I am only just a beginner on all this, but my understanding is that you should be able to do this in DW CC in the various size layouts.

     

    You should be able to change around which divs are where in the various layouts in DW CC by clicking the up and down arrows.

     

    You need to be careful that you are not changing the universal layout though. You use the design view and click on the div. That should then move it up and down. However, you need to check in the CSS panel to make sure you are not making a global change, but are just changing it for the layout you want.

     

    Good luck!

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2013 3:56 AM   in reply to complexity

    Hi Complexity,

     

    I have got some further info, and if I have lead you astray I am sorry.

     

    I don't think you can change the order of the divs in a responsive layout in DW CC.

     

    However, you can arrange the divs to sit under or beside each other differently in each of the layouts, for pc, tablet or phone.

     

    You can also switch divs off and on in each of the layouts, having them display in one size screen and not in another.

     

    So what you would need to do is to create a couple of nav divs, if you want a nav at the top of one type of screen and one at the bottom. You could duplicate the content in both of them and switch one on in one layout and one off in the other.

     

    I hope this helps!

     

    I am doing my first layout for a client using DW CC responsive layouts. I have done two test/hobby sites already.

     

    It is a bit of a mission learning it but I am getting there.

     

    I do find it interesting that most people recommend using other programs to do responsive rather than Dreamweaver's fluid grid layouts. I don't think many people are using it yet.

     

    Regards,

     

    Mary

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2013 10:37 PM   in reply to complexity

    Im novice, but I might suggest making a rule in the mobile that switches the floats of the photo element and another element you listed. If you switch the floats from left/right vicesa-versa, the element should switch positions from left to right, essentially the order they are dislayed.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 17, 2013 10:54 PM   in reply to complexity

    Thanks Ill check into flexorder, looks kinda tricky. I'm trying to figure how/or whats better for responsive design navigation: a navigation menubar widget or an html ordered list navigation, and/or display none for mobile and use a jquery mobile nav.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 28, 2013 10:42 PM   in reply to dreamweaver70

    So having completed my first commercial fluid grid layout with Dreamweaver CC I have established that you definitely can't change the order of the divs.

     

    You can adjust them so that they sit beside each other, but you can move a div four levels down to be on top of another div in one media query. It will move in all of the different media queries and display in that new order in all layouts.

     

    You would have to use another responsive program to do this.

     

    What to do.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points