Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Now, I understand how "breakpoints" work - when the browser window reaches a certain width, the element within the queries changes. Now, here is my question:
If I start designing a website, and start adding styles for how I want to look on a mobile device, when the design is finished and I want to expand on it, what's the effective way on doing it?
At the moment, all that I can think of is adding a queries with a higher min-width breakpoint, and then paste the CSS from the code that I already made and start making changes respectively, within the queries. I have a strong feeling that this is not the correct way of doing things, so this is why I am asking for help. Thanks!
You have the correct approach when it comes to making a design and thinking mobile first. Now what you need to do is think of how it will be when you resize it to large device widths.
There are a lot of things you can look into, many people could suggest you to look at frameworks such as Bootstrap just to understand how they use media queries to achieve many things. My advice is to use as little media queries as you can. Try to support at least two device widths: mobile/tablets and desktop. Since mobile/desktop can be interchangeable and new devices are always coming out, a consistent design is best. However you can safely support mobile/tablet/desktop if you take the time to do so properly.
Now, I will try to keep it very simple for you and introduce the most basic way to do media queries right and expand from there.
Let's begin with the most important yet simplest building block of responsive web design: a container element. This container element is to be used for the content in your website, the content is for you to choose to imagine upon, since these containers will need to expand from device width to device with accordingly.
Navigation bar example:
.navigation-bar-container {
position: relative;
width: 100%;
min-width: 320px;
max-width: 100%;
height: 100px;
}
Check the above code its so simple and straight forward, what does it do? I can imagine it will hold all the elements within a navigation bar. It can certainly be used in more than just that way, but for now all we care about its a navigation bar.
It's minimum width is 320px, because the smallest screen you need to support may be 320px wide (iPhone anyone) so there is no need to shrink your element below that.
Max width is interesting. Currently the nav bar's max width is 100% because I said it is... no, that does not make any sense. Why is it 100%? It is because I want to make it always expand to the full width of the screen, regardless of the screen width. That is it's default behavior.
Now try and think of what will happen to your navigation bar's width when you are in a different screen sizes, such as mobile devices. What will happen with the elements, will they shrink with your container? Will they even fit when the screen size is too small? Enter media queries.
Full desktop widths: approximately 769px or above... this is subject to change of course.
The max width is 100% and width 100% means it will adjust to whatever the screen size is. Default behavior doing its thing, yes!
Tablets: approximately 421px to 768px... this is subject to change of course
If your elements will not fit into all tablet sizes and make your navigation bar look weird, yes try it throw some divs and stuff in it and shrink it, then what do we do? It is time to make them fit by using the good old media queries:
#media screen and (max-width: 768px) {
.navigation-bar-container {
display: none;
}
.sliding-navbar-container {
display: block;
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 320px;
}
}
Yes I did not make them fit at all. I swapped the good old navigation-bar-container width a different one. Classic example of what is good and safe when using media queries. Instead of breaking your head over how to fit these elements, spare no hesitation my friend, just swap your navigation bar for another that will work on smaller devices in there.
Note how the new navigation bar actually accounts for its width 320px, it will sit absolutely positioned to the top and left of the screen, doing a good job there. How to make it slide in and out, pop up, look neat is another question entirely! Don't ask unless you are curious... back to media queries!
However if we are speaking of an element which will change, let's say it always occupies 100 percent of your screen width, and then shrink to occupy half of the screen width for tablet/landscape phone devices only, then you may want to use a media query like so:
#media screen and (min-width: 421px) and (max-width: 768px) {
max-width: 50%;
}
Very small and simple change. Max width is interesting because it controls your inner width, which is by default set to 100%. This change will force your element to adjust to 50% of the screen width while still resizing to adjust to 100% of the new element width. It could also be a good idea to make it max-width: 50vw since it will adjust to the viewport width instead, thus making it responsive even when dealing with widely different viewports.
And so, we come to our conclusion TLDR:
Use as little media query sizes as you need, because if you need a lot then you are doing it wrong, seriously!
If you need a lot, cannot avoid it, then get to know Bootstrap, let other people worry about the media query nightmares.
Think in containers, your elements will sit and move around in them. Think of how these containers will flow from desktop to mobile and vice versa. Putting thought behind this is crucial as it is the source of your responsive behavior and should be the focus of your media queries.
Although not covered here, you can easily look at media queries and font/image examples. Responsive fonts and images are a crucial part of your content and they as such should be accounted for with media queries. Background image changes, better readability depending on the device you are on, all of that matters and can be simplified via media queries.
I put this last here because IT MATTERS A LOT use SASS/SCSS and save yourself a ton of trouble when working with media queries (and everything CSS). Look into mixins, variables, partials which you can use along media queries. You will love it if you didn't know about it and start using it now.
Need more? Fine enjoy Google's responsive web design fundamentals
Good luck!!!
Related
I work for a publicity agency, where my boss designs mockups in Photoshop (based on his 1920x1080 screen), and where the website final layout must look 90% like his, very close. We don't use Bootstrap (or any css framework) as he defines margins and columns himself, so Bootstrap gets more in the way than helping.
We use a mockup image for 16:9 aspect ratio, that can be opened in the browser and fits perfectly if you're viewing it on any 16:9 monitor. When we move on to actually creating the html / css page, we're unable to achieve that effect, and rely on many media queries to 'fix' each bigger or lower resolution than the one it was designed in.
Is there a way to make an element - or the whole body, to simply scale from the original design, so that we don't need to do any media queries between screens that share the same aspect ratio?
This way, we would only have three media queries: One for 16:9, one for 9:16 and one for 16:10.
Additional Info: I'm looking for something that does similar to the transform: scale property, but that one in particular doesn't work here (using it causes problems with buttons becoming unclickable in some browsers).
....Technically, yes, but in reality, it's a lot of work, and won't really save you any time. Your best bet is to go back and start using Bootstrap. At least, using the cols and rows of Bootstrap Bootstrap is a fantastic tool for building responsive websites, for people who aren't comfortable building responsive websites on their own.
I... have a lot of things to say.
First of all,
If you're working on building websites, you really, really should have two monitors attached to your computer. Personally, I prefer having one small (1280x800) and one large (1920x1080) screen, because it makes me more aware and comfortable with responsive design. But that's my personal preference, and many people prefer two large monitors. At the very least, you should also have a 1080p screen, so you can work directly on it.
To answer your question directly, this strategy is not going to work for tablets and phones, because the aspect ratio on desktop computers is "landscape", but in mobile devices the aspect ratio is "portrait". If you've ever tried to view a 1920x1080 image in mobile, you'll immediately see why this a problem.
HOWEVER. If you're looking for a way to scale the entire website based upon the body, ...the approach that comes to mind first, REM, is quite popular, and I assume you've already tried it, but... I'll clarify, just in case.
You can define everything using percent, EM or REM (h1, h2, h3, p, borders, padding, margin, height, fontsize, box-shadow etc... Everything. The phrase px should not appear in your stylesheet.) , and then scale the website with a simple series of media queries like this:
#media( min-width:1200px){
html,body{
font-size: 14px;
}
}
#media( min-width:1400px){
html,body{
font-size: 15px;
}
}
#media( min-width:1600px){
html,body{
font-size: 16px;
}
}
#media( min-width:1800px){
html,body{
font-size: 17px;
}
}
Which will cause the entire website to scale. Obviously, if you're working with a theme or framework(Like Bootstrap), you'll need to modify that framework to use REM too.
#3.The last thing that I have to say is that most websites DON'T look exactly the same on 720p screens vs 1080p screens. For example, take StackOverflow itself. This is what the current page we're looking at looks like:
div#left-sidebar {
width: 164px;
}
#sidebar {/*Right sidebar*/
float: right;
width: 300px;
}
div#mainbar {/*Center section*/
width: calc(100% - 300px - 24px);
}
#content {/*And this wrapper around it all*/
max-width: 1100px;
width: calc(100% - 164px);/*left sidebar*/
}
If you look at it, the entire website is more or less max-width:1480px. If it gets smaller than that, the sidebars stay the same size, but the middle section has width:100% and shrinks to fit the screen.
At around 1000px, StackOverflow gives up and hides the right sidebar, because there's not enough space, but it STILL doesn't change the size of any fonts or icons, ever. (On any screen size, from 1920px all the way down to tablet.)
A good designer should keep this kind of "responsive design" in mind, and give his programmers a design that can shrink cleanly, in this way.
You’re looking for vw css unit. (Not sure if you need vh as well).
Checkout this website for an intuitive understanding of how those units work: https://sparanoid.com
vw unit is relative to viewport width. So if you code everything in vw. your website will behave like an image, just what you ask for.
I've recently deployed my first ever website and on my wide screen 1920x1080 monitor everything looks fantastic. However, things start to get really weird on 13" laptop screens, tablets and mobiles. I've been analysing my code and a few development tools such as googles and bootstraps recommendations for mobile and I just can't quite seem to understand what it is in my code that needs fixing.
On mobile, it's possible to scroll across all the way to the right to parts of the website that shouldn't even exist, just scrolling over to white space. I've managed to remove the navbar for mobile - a start, but honestly, I feel a bit lost/overwhelmed and can't seem to find the root cause of this issue.
Here is my website: -redacted-
and -redacted- is my github repository
The problem is that your using fixed width's for the elements on your page.
E.g. for the class .container you specified a width of 970px. Try using percentages, like so:
.container {
width: 80%;
margin: 0 auto; //to center it
}
You can basically take this solution and apply it to the other issues on your page, like the header.
Also note:
You should also look into media queries, that would enable you to keep the page as it is for large screens and only change it for smaller screens, defining, e.g., a max-width:
#media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}
EDIT:
I understand you are using Bootstrap - in that case you would need to entirely delete all statements that are overriding Bootstrap's default configurations.
Anyway, keep the upper recommendations in mind for future CSS coding.
You have set your containers width with px.
Try to change them with % or directly erase those px measures.
Bootstrap containers adjust themselves to the correct width they need.
You have this rule in your CSS, which is ruining the responsive effect the .container class from Bootstrap is supposed to have (overriding the media-query-set width it should be using, and indeed is using in other parts of the page):
.myskills .container {
width: 1500px;
position: relative;
top: 35px;
}
Setting a fixed width, in this example, being the problem.
There may be more examples of things like this on the site, so I'd advise removing all examples of this that you can find.
In general I wouldn't advocate overriding Bootstrap CSS classes without being very sure why you need to do so, particularly the structural elements like .container, .row and .col-xx-x classes.
I've found StackOverflow extremely useful so thanks for any help in advance.
On http://test2.heyscout.com/, I'm wondering how to properly set up my background-image in my "hero div" for responsive web design. I've been playing around with numerous settings but I'd like it to:
stay in position consistently without jumping around due to browser size (for example, on the mobile phone, it gets misaligned or there's white space where there shouldn't be)
the 'Verify Anyone Offline' doesn't resize properly even though I set it in em
the button looks strange on a mobile device
What is the best practice for keeping the "hero div" in check? I'd surmise it'd have to do something with the min-height or perhaps fixing the dimensions of the actual image. Should I set the height of the hero div in percentage rather than pixels?
Also any advice on how to keep my "trimester div" fill up nicely the bottom 1/3 of the page consistently would be great- I'd imagine when the height of the browser is bigger than expected, it'd look strange. I've read that it's best to keep the height attribute alone for RWD but I'm wondering if there are any tricks to make sure it resizes properly.
Have you looked into Media Queries? Basically, they allow you to set specific CSS based on browser width (and height). This will allow you to control how your page looks at specific browser sizes.
Example - CSS at different widths:
#media screen and (max-width: 600px) {
/* add some CSS here for 600px maximum width*/
}
#media screen and (max-width: 960px) {
/* add some CSS here for 960px maximum width*/
}
To get the background image to always fill the div, use background-size: cover2 unless you need to support IE8.
If your font size doesn't look right across pc/tablet/handheld, try using media queries to set font sizes for specific resolutions.
I'm not sure how to help you with your button "looking strange", except to offer profuse sympathy.
In the future, try to keep your questions more focused. :)
give
background-size:contain;
and this may solve your problem, because it will auto adjust size by contain!
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
Is there any way to progressively resize using media queries rather than at pre-determined widths? E.g.
Currently I have something like:
#media screen and (max-width: 1024px) { }
Now this will ONLY resize when the window hits that magical 1024px boundary... however, I need it to resize at every stage, not just 1024px.
If the user makes the window 10% narrower then the images and font sizes also need to reduce by 10%.
Is this possible with media queries or am I going to have to go down the JS route for this?
Thanks.
Just make the entire layout flexible. You could then resize the images using width: 90%; (or any value you like), Or use max-width:90%; if you don't want the image to upscale.
Gradually resizing the text is not possible using media queries or css, but you really shouldn't do that. People with smaller windows wouldn't be able to read the text, and people with big screens will have to sit back because the text is to big. Not to mention people using a mobile phone.
Yes, you can do progressively resize using vw, and vh. Do take note of the browser support though.
.h1 {
font-size: 50vw;
}