ppgking ppgking - 4 months ago 7
CSS Question

How can I improve my webpage code to be scalable for smaller sizes?

I'm having trouble figuring out how to make my webpage on codepen scalable. It look fine on a larger screen, but if you scale the browser smaller or view it on mobile everything gets whacky. I tried using

position: relative;
to make the outer div elements stay the same size as it's contents, but when you make the window smaller they end up being pushed out. I also tried
img-responsive
class for my images, but it did not seem to help.

I'm fairly new to javascript, html, and css and would really appreciate any tips on how I could improve the styling.

Here is the code on codepen.

Answer

You can use @media queries in CSS to make your website scalable and responsive. The are a lot of ways to use media queries, but I like to use them like so:

.element {
    /* The code to be used for this element in general */
}

@media screen and (min-width: 1300px) {
    .element {
        /* The code to be used for this element in devices wider than 1300px */
    }
}

The above example can show different content at different sizes based on the minimum width of the screen of the user's device. There so many options that, literally, the sky is the limit!

Some very common mobile device dimensions you will most likely need to use at some point are:

  • 320px x 640px (Average dimensions of a mobile device)
  • 360px x 640px (Samsung Galaxy S5)
  • 411px x 731px (Google Nexus 5X)
  • 414px x 736px (iPhone 6 Plus)
  • 768px x 1024px (iPad)

Some other useful properties are:

  • Max-width (Base your choices upon the maximum width of a device's screen)
  • Orientation (It can be either landscape or portrait and it means the side you hold your phone)
  • Aspect-ratio (The ratio between the width and the height of the viewport)
  • Device-aspect-ratio (The ratio between the width and the height of the device), etc.

Be sure to check out these pages for info related to the correct use of media queries as well as easily comprehensible examples:

Another way to enhance your webpage's scalability and responsiveness is to use powerful frameworks like Bootstrap, which are designed to aid you in making your webpage more responsive in far less time than you would do on your own.

You can find a very helpful tutorial for Bootstrap here.