Reputation: 35
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
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:
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.
Upvotes: 1
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