Results 1 to 5 of 5

Thread: Coding for webpages for when screen size changes?

  1. #1

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,998

    Coding for webpages for when screen size changes?

    I ran into an issue where a customer's site had the formatting off on his browser. He was using chrome and he said that the magnification was normal but I'm thinking otherwise. With that said, how do you accommodate for when the magnification is adjusted. Does this require CSS changes?

    Thanks,
    Blake

  2. #2
    .NUT jmcilhinney's Avatar
    Join Date
    May 2005
    Location
    Sydney, Australia
    Posts
    105,477

    Re: Coding for webpages for when screen size changes?

    Yes, it is done using CSS. The term you're looking for is "responsive design". Search that and you should find more information than you can handle.

  3. #3

    Thread Starter
    PowerPoster
    Join Date
    Jan 2004
    Location
    Southern California
    Posts
    4,998

    Re: Coding for webpages for when screen size changes?

    Thanks JMC...
    Blake

  4. #4

    Re: Coding for webpages for when screen size changes?

    Yes, you can do it with CSS using @media query.

    Like this...

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    * {
      box-sizing: border-box;
    }
    
    .row::after {
      content: "";
      clear: both;
      display: table;
    }
    
    [class*="col-"] {
      float: left;
      padding: 15px;
    }
    
    html {
      font-family: "Lucida Sans", sans-serif;
    }
    
    .header {
      background-color: #9933cc;
      color: #ffffff;
      padding: 15px;
    }
    
    .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }
    
    .menu li {
      padding: 8px;
      margin-bottom: 7px;
      background-color: #33b5e5;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    .menu li:hover {
      background-color: #0099cc;
    }
    
    .aside {
      background-color: #33b5e5;
      padding: 15px;
      color: #ffffff;
      text-align: center;
      font-size: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    
    .footer {
      background-color: #0099cc;
      color: #ffffff;
      text-align: center;
      font-size: 12px;
      padding: 15px;
    }
    
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }
    
    @media only screen and (min-width: 600px) {
      /* For tablets: */
      .col-s-1 {width: 8.33%;}
      .col-s-2 {width: 16.66%;}
      .col-s-3 {width: 25%;}
      .col-s-4 {width: 33.33%;}
      .col-s-5 {width: 41.66%;}
      .col-s-6 {width: 50%;}
      .col-s-7 {width: 58.33%;}
      .col-s-8 {width: 66.66%;}
      .col-s-9 {width: 75%;}
      .col-s-10 {width: 83.33%;}
      .col-s-11 {width: 91.66%;}
      .col-s-12 {width: 100%;}
    }
    @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
    }
    </style>
    </head>
    <body>
    
    <div class="header">
      <h1>Chania</h1>
    </div>
    
    <div class="row">
      <div class="col-3 col-s-3 menu">
        <ul>
          <li>The Flight</li>
          <li>The City</li>
          <li>The Island</li>
          <li>The Food</li>
        </ul>
      </div>
    
      <div class="col-6 col-s-9">
        <h1>The City</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
      </div>
    
      <div class="col-3 col-s-12">
        <div class="aside">
          <h2>What?</h2>
          <p>Chania is a city on the island of Crete.</p>
          <h2>Where?</h2>
          <p>Crete is a Greek island in the Mediterranean Sea.</p>
          <h2>How?</h2>
          <p>You can reach Chania airport from all over Europe.</p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>
    
    </body>
    </html>

  5. #5
    Super Moderator dday9's Avatar
    Join Date
    Mar 2011
    Location
    South Louisiana
    Posts
    9,689

    Re: Coding for webpages for when screen size changes?

    Responsive web design is one of the primary reasons why I use a CSS framework like Bootstrap, Material, or Skeleton (based on the client).

    For example, if you look at Bootstrap's layout documentation (here) you will see that what is happening is they setup breakpoints for:
    • extra-small: 576px or less
    • small: 576px and up
    • medium: 768px and up
    • large: 992px and up
    • extra-large: 1200px and up


    By doing this you can effectively show/hide content based on the screen size (for example navigations go from full width to a collapsible list) or have the content resize properly at those breakpoints.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width