Responsive Design, HTML, CCS... and JavaScript?

+2 Saurabh Bhairava · August 8, 2014
Recently I discovered Bucky's tutorials on Youtube. I have watched a few of the videos, and have written my own HTML and CSS while following along. For example, I went thru all 4+ hours of: HTML and CSS Tutorial Create Your own Complete Website.

The style, information, and pace seem good for me.

I have question regarding 'responsive design'.

I done some research and have been able to write HTML and CSS so that, for example, the page columns will become more narrow if the browser window is made smaller. Or, the left column stays at a certain width, with the 2nd/right column get narrower.

If I want to be able to transition thru
1) three columns, with the nav in the left most column
2) two columns, with the nav on 'top'
3) one column, with the nav all the way on the 'bottom' of the page

... can I do it using just HTML and CCS, or do I have to add JavaScript into the mix.


Post a Reply


Oldest  Newest  Rating
0 Shamal Sandeep · August 10, 2014
There are options available with JavaScript and CSS but the most responsive way is to use CSS
Following styles are applied randomly according to the screen size or the window side of the browser.

@media all and (max-width: 1000px) and (min-width: 700px) {
#sidebar ul li a:before {
content: "Email: ";
font-style: italic;
color: #666;
+1 Kaveh Greenwood · August 10, 2014
What Colin said, use media queries to change the display & width of the sections.

Note: JavaScript is not needed at all though it is useful. jQuery library makes it even easier to apply.

This website only teaches so much, continue learning and researching on YouTube. Here and YouTube is where I learned everything I know.
0 Colin James · August 9, 2014
If you can put your nav bar at the bottom of the page by changing CSS then you can use media queries in CSS.

Code is:

@media only screen and (max-width: 480px) {
    div#navbar {
        /* Move to bottom of page CSS */

You need to make sure in your <head> you've got:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
0 Saurabh Bhairava · August 9, 2014
Ok, so that means when I make the browser window really narrow (basically at the min width) the HTML/CSS can handle the final change where... the nav bar moves
 - from being at the very top of the page,  
 - to being at the the very bottom of the page.

Good.  Is there a simple example of this? Does it involve things like:

  @media only screen and (min-width: ...

  and use or non-use of things like  
  display:inline-block,  or    float:left ?

If I know what direction to go in, I think that I can put together the HTML/CSS code to make it work.
-1 Colin James · August 8, 2014
You don't need javascript at all.
  • 1

HTML / CSS / Web Design


Discuss, share, ask, learn and teach HTML5 and CSS3.