CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ppgking
ppgking

Reputation: 35

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.

Upvotes: 1

Views: 69

Answers (2)

Angel Politis
Angel Politis

Reputation: 11323

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.

Upvotes: 1

Isabel Inc
Isabel Inc

Reputation: 1899

You could adjust the css of your webpage using a media queries.

You could use the max width 480px query in which case the styles will be applied for all devices with a size of 480px or smaller. You can adjust this query based on the screen size you want to target

Something like this

@media only screen and (max-width: 480px) {
    .hide-something-on-mobile {
        display:none;
    }
}

Additionally you could also use min-width:481px and have the element be a display:block on larger screens. This is know as mobile first because you're targeting your css towards mobile devices and then changing things for larger devices.

@media only screen and (min-width: 481px) {
    .show-something-on-large-screen {
        display:block;
    }
}

You can adjust any css you want with these queries not just hiding and showing stuff. Put whatever styles you want to apply inside the media queries and they will all be applied for the corresponding screen size.

Here's a great article that shows how you could use media queries effectively to adjust the look of your webpage Media Queries

Cheers and happy coding

Upvotes: 0

Related Questions