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.
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:
Some other useful properties are:
landscape or portrait and it means the side you hold your phone)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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments