Skip navigation
Currently Being Moderated

How they may these things responsive

Oct 9, 2013 11:21 PM

I was noticing how with this website template as you shrink the browser width, the size of the text that says "whatever type of retail business you have" gets smaller at one point. Also the menu bar text turns into image icons when the screen gets about the size of an iPhone. What do I need to read up on in order to learn how to do this?

 
Replies
  • Currently Being Moderated
    Oct 10, 2013 12:07 AM   in reply to Palisades-Web

    Dreamweaver CC comes with a pre-built in fluid grid system which helps build responsive websites.

     

    I don't know anything about it as personally I would not use it.

     

    If you want to create a responsive layout manually then use hand built css media queries.

     

    The idea of a css media query is you can change elements based on browser viewport width.

     

    A very simple example of a media query would be to set the 'header' <div> to NOT display when the browsers viewport gets down to 420px width by adding a media query to the css.

     

    @media only screen and (max-width : 420px)

    {

    #header {

    display: none;

    }

     

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 10, 2013 2:58 AM   in reply to Palisades-Web

    You should set the width of the element to auto.

     

    as for hidding elements on different screen you first select the screensize button you want to make the changes on split or design view  , then select the element and set its css  to display:none;

    you should watch this video tutorial:

    http://tv.adobe.com/watch/learn-dreamweaver-cc/create-fluid-responsive -web-pages-in-dreamweaver/

     
    |
    Mark as:
  • Currently Being Moderated
    Oct 11, 2013 7:35 AM   in reply to Palisades-Web

    Yes my dreamweaver cs6 is just like yours , i think he is using dreamweaver cs6 cc(creative cloud) and its on mac not windows,mine doesnt have that structure button too.So in our dreamweaver you have to insert fluit div or insert div were you name the div id and class.if you want to make the new html5 tags like <header> and <aside> and <footer> you have to code them by hand.

    once you insert two fluid div´s you can name them nav1 and nav2 you choose one to appear on the desktop view and the other one to display on tablet and mobile version.

    on the css file:

    media for desktop{1232px

    #nav1{

    display:block;

     

    }

     

    #nav2{

    display:none;

     

    }

    }

     

    media for mobile{480px

    #nav1{

    display:none;

     

    }

     

    #nav2{

    display:block;

     

    }

    }

     
    |
    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