Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

View Poll Results: Was this tutorial helpfull?

Voters
1. You may not vote on this poll
  • Yes

    1 100.00%
  • No

    0 0%
Results 1 to 4 of 4
  1. #1
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    I really enjoy'd making this tutorial. I want to do more in the future on different topics but I need feedback in order to know how to improve them. If you have anything to say at all please do so!

    The first div we want to control is the wrapper div because it contains all the other divs inside of it.
    This code will set the width of the wrapper to a percent rather then a set amount of pixels making the width based on the size of the browser. The rest of the code is pretty self explanatory. Code the following CSS under the argument.

    Code:
    /* pagewrap */
    #wrapper {
    width: 95%;
    margin: 0px auto;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
    }
    The last div's we want to control are the sidebar and content div's. Again, this CSS is pretty self explanatory. We are manipulating it in such a way that it will fit together with the right amount of padding on every side. After your done with all the CSS for this argument put the } to close it. Code the following CSS under the wrapper div.

    Code:
    /* content */
    #content {
    width: 59%;
    padding: 3% 4%;
    }
    
    /* sidebar */
    #sidebar {
    width: 30%;
    }
    
    #sidebar .widget {
    padding: 8% 6%;
    margin-bottom: 10px;
    }
    In the end your CSS for this arugment should look like this...

    Code:
    @media screen and (max-width: 980px) {
    
    /* pagewrap */
    #wrapper {
    width: 95%;
    margin: 0px auto;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
    }
    
    /* content */
    #content {
    width: 59%;
    padding: 3% 4%;
    }
    
    /* sidebar */
    #sidebar {
    width: 30%;
    }
    
    #sidebar .widget {
    padding: 8% 6%;
    margin-bottom: 10px;
    }
    }
    Now lets add another argument so it will further "reform" the website to work for tablets. Write this argument at the end of your current CSS.

    Code:
    @media screen and (max-width: 650px) {
    Now that you have the argument, code what you want the website to do if the browser size is less than the argument. I have already covered how this needs to be done on the first argument so I will just fill in the CSS for this one.

    Code:
    /* header */
    #header {
    height: auto;
    margin-top: 10px;
    }
    
    #h2.header{
    margin: 0 0 5px;
    padding: 0;
    font: bold 20px/120% Arial, Helvetica, sans-serif;
    }
    
    /* content */
    #content {
    width: auto;
    float: none;
    margin: 5px 0;
    }
    
    /* sidebar */
    #sidebar {
    width: 100%;
    margin: 0;
    float: none;
    margin-top: 10px;
    }
    #sidebar .widget {
    padding: 3% 4%;
    margin: 0 0 10px;
    }
    
    /* sidebar widgets */
    .widget{
    margin: 20px auto 0px auto;
    }
    Again, when you are done coding for this argument close it with a }.

    Now lets code for the last argument. This will adjust the website for any smartphone. Write the following argument under the CSS you have so far.

    Code:
    @media screen and (max-width: 490px) {
    Now that we have the last argument, code what you want the website to look like on a smartphone. Again, I have already gone over this so I will fill in the CSS needed here.

    Code:
    /* disable webkit text size adjust (for iPhone) */
    html {
    -webkit-text-size-adjust: none;
    }
    
    /* content */
    #content {
    margin: 10px 0;
    }
    
    /* sidebar widgets */
    .widget{
    margin: 40px auto 0px auto;
    }
    Like the last two arguments close it with a }. When you have finished your query.css file, it should look like this...

    Code:
    @media screen and (max-width: 980px) {
    
    /* pagewrap */
    #wrapper {
    width: 95%;
    margin: 0px auto;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
    }
    
    /* content */
    #content {
    width: 59%;
    padding: 3% 4%;
    }
    
    /* sidebar */
    #sidebar {
    width: 30%;
    }
    #sidebar .widget {
    padding: 8% 6%;
    margin-bottom: 10px;
    }
    
    }
    
    @media screen and (max-width: 650px) {
    
    /* header */
    #header {
    height: auto;
    margin-top: 10px;
    }
    
    #h2.header{
    margin: 0 0 5px;
    padding: 0;
    font: bold 20px/120% Arial, Helvetica, sans-serif;
    }
    
    /* content */
    #content {
    width: auto;
    float: none;
    margin: 5px 0;
    }
    
    /* sidebar */
    #sidebar {
    width: 100%;
    margin: 0;
    float: none;
    margin-top: 10px;
    }
    #sidebar .widget {
    padding: 3% 4%;
    margin: 0 0 10px;
    }
    
    /* sidebar widgets */
    .widget{
    margin: 20px auto 0px auto;
    }
    }
    
    @media screen and (max-width: 490px) {
    
    /* disable webkit text size adjust (for iPhone) */
    html {
    -webkit-text-size-adjust: none;
    }
    
    /* content */
    #content {
    margin: 10px 0;
    }
    
    /* sidebar widgets */
    .widget{
    margin: 40px auto 0px auto;
    }
    }
    Now, when you open the index.html file in any browser, the website should be fluid. If you stretch or shrink your browser it should "reform" and still look how its supposed to.

    I realize that most of you will not want to upload this to a test hosting server to see if it works on all
    devices so I have done that for you.

    DEMO SITE: CSS Media Queries Demo
    Last edited by Andrew Yurlov; Jan 25th, 2015 at 04:18 PM.
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  2.  

  3. #2
    Member
    Join Date
    Jun 2012
    Location
    New York
    Posts
    55
    Member #
    31903
    Thank you for tutorial! Great work. Put into my knowledge base

  4. #3
    Senior Member Andrew Yurlov's Avatar
    Join Date
    Apr 2011
    Location
    Portland, OR
    Posts
    1,306
    Member #
    27566
    Liked
    181 times
    Quote Originally Posted by Vincewicks, post: 247743
    Thank you for tutorial! Great work. Put into my knowledge base
    No problem. Glad to hear it
    Artificial intelligence is nothing compared to natural stupidity -Someone

    Design is a funny word. Some people think design means how it looks.
    But of course, if you dig deeper, itís really how it works.
    -Steve Jobs



  5. #4
    Junior Member cranknet's Avatar
    Join Date
    Aug 2013
    Posts
    2
    Member #
    36972
    Thanks a lot bro, I followed the tutorials.

    look to my example in the attchment & tell me if there is a problem. :tickle:
    Attached Files Attached Files


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:01 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com