This is a follow-up question to one I asked before:
"CSS - elements position when the window size changes".
The issue was - How to avoid the elements from being pushed aside when the screen gets smaller.
The answer was - use static width.
Static width indeed solves the problem, however it causes another problem (now we get to my follow-up question):
Let's say I use a picture as a background for the headline of the site and another one for the footer.
On the one hand I want them to always take the whole screen width but on the other hand I don't want them to be pushed aside when the window displaying the site gets smaller.
Using static width will cause different display in different browsers or in different versions of the same browser - will not always take the whole width. (there isn't one static width value that is good for all cases)
Using width: 100% seems to be the solution but then I find myself where I began.
How can I accomplish both?
Thanks.
This is the reason that we have css media queries and max-width, max-height attributes
Media queries allow you to change the css depending on how big the screen size is. Plus they can do a lot more.
http://www.w3schools.com/css/css_mediatypes.asp
What I would do is design your site with max-width: someamount, and width: 100%. Once your finished, then worry about making it look better on smaller screens.
Designers usually go one of two ways when designing a responsive website. Either design for desktop size screen first, then adjust for the smaller sized screens towards the very end. OR design for mobile sized screens first and then the larger screens towards the very end.
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 4 months ago.
I am working on 3 HTML5 responsive websites and they all need to be adapted for devices.
I understand so far the media queries for small devices and I have seen good score on that, 320px, 375px, 425px, 480px, 768px, 1024px.
Now the "problem" comes for bigger screen.
I still have few doubts, for example in the office where I am working they have really big screen 2560px but how should i write the right queries for that ?
I have an 11" macbook and my colleagues have also got a bigger one 13" where the homepage is showed in a different way.
Should i also set a max-width 1680px, max-width 1920px and max-width 2560px? I saw on Google that this are the most common big screens and is apparently "working" when I checked back in the office.
The real questions are: How should I work on bigger screen? Which settings should I use to show the same webpages on different big screens?
The answer is that you should have a final width you design for and then eventually center that div in the middle of the page, so that even if the screen gets wider, the only thing that'll get wider is the background surrounding the div. You will need to set width of the div to a fixed width.
Even for larger screens, there gets to be the point where scaling larger fonts, makes the experience to cumbersome to read. If the content were to be scaled to 100% of the browser's width, it would take too long for the reader to read the information desired, hence why centering a fixed div works. It is also conveniently less work for the developer as well.
In terms of smaller screens, you would probably need to scale the div that contains all your information to 100% of the browser's width at a certain breakpoint via media queries.
The end result should look like this:
100% browser width --> fixed centered div with a background
(mobile + tablets) (large screens)
I am first year student Software Engineering and I use to have an assignment to make a web page. It is not complicated at all but after writing the web page I realised that when you open the site in smaller resolution (than mine 1080p) device it doesn't fit very well. I don't know what resolution uses the teacher who is going to assess me so i want to modify the site for 1600;900 and 1336:768 at least.
I should say that I used other suggestions that I should divide div tags by % not by pixels but it still doesnt work.
I googled the problem and I think I found a solution - actualy it is something with #media where you can set different percentages for different screen resolutions in advance and then you get the cliend screen resolution and open it in appropriate proportions
So I wanted to ask you how exactly to write this?
P.s you could take a look at my webpage here
The answer really depends on how intricate your site is, what the layout looks like, and what elements need to do at what sizes.
In general, HTML is "fluid" by default, so text will wrap, and elements will resize to fit their contents, so if your design is simplistic, you shouldn't have to do anything.
When you start sizing things with absolute/static pixel sizes, you get yourself into situations where things no longer fit.
You should generally avoid making designs that are fixed pixel sizes, and allow for elements to re-size naturally as HTML is designed to do.
#media queries are appropriate for changing appearances at specific resolutions, and are generally set up to make "responsive" designs, where elements can change styling or be hidden/shown at different resolutions. This is usually used for more complicated or dynamic layouts, and still needs to be planned for accordingly, because it is usually set up to accommodate a range of resolutions. For example an element might be 100% wide from 0 to 1024 pixels wide, and become 50% wide when the window is over 1024 pixels wide.
In the case of your web site, you are sort of breaking it by floating everything left. float tends to be really over-used in CSS without understanding its side effects.
Remove width from your menu element, and remove width and float from your content element.
This will cause the menu to be as wide as its contents (the buttons) and "float" next to the contents, which will try to be 100% wide, but be narrowed to allow the menu to fit next to it.
Good luck in school you will need to read up on responsive design which you acheave via CSS.
eg.
#media screen and (min-width: 500px) {
// Write your style
}
#media screen and (min-width: 501px){
// Write your style
}
That is what you need to do, there is lot of documentation and tutorials on this you will have no problem finding the resources.
Here is a TutsPlus page to get you started: Tutorial link
I'm learning the new "Responsive design", and one of the first things I understood is that we should use percentages in defining whatever we could define, most importantly, the width.
Let's say I have 2 inline-block divs.
<div>
//Left div
</div>
<div>
//Right div
</div>
The first div, has a width:50%, the second div has a width:40%, everything seems good here, they are beside each other, and when you resize the browser they will get smaller.
So that we stop them from resizing too much (where things become unreadable), we should use min-width in pixels.
If I set min-width:200px; for the first div, and min-width:100px; for the second div, and when I resize the window until the second div becomes under the first div, everything seems good.
But if I resize MORE and MORE, the width will stay fixed because the browser size is less than the min-width of those divs, which will lead to the creation of the scrollbar.
I am resizing so I can test how things should look on smaller resolutions (phones, tablets), am I missing something here? Is this where everything stops and the role of media queries begin? or there's more that I can do to fix this?
JSFIDDLE
Is this where everything stops and the role of media queries begin?
Essentially, yes. Media Queries are what you need to use when you feel that your design can no longer squeeze in to the space you're providing it. At the point you're talking about, roughly 300px window size (plus margins?) you would want to use a media query to change the way you display those divs, perhaps so that they were 100% of the width of the viewport, and thus stacked one on top of another rather than side by side. This would effectively over-ride the min-width in practical terms for your example.
What you want to achieve is a design that works regardless of the viewport size, and the moment that making the viewport too small, or too big, means that the layout is hard for the user to use or read, then media queries provide the best way right now to "reset" the layout to re-inject usability for that new set of dimensions.
I would say you don't necessarily have to worry about setting a min-width; though there's a strong argument for using them to take in to consideration internet explorer, as it won't deal with media queries in it's older versions.
What you are looking for is known as responsive layout.
Here are couple of reference links that might help you to achieve responsive layout.
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
http://www.elementfusion.com/tutorial-optimizing-your-website-for-mobile-devices
I have created my website as a fixed layout, with a width of 1600px,
but the webpage on a smaller resolution looks too big.
What am I supposed to do to make it looks good in every resolution?
Thanks for help
Use relative measures, like width: 100%. You can constrain this even more by using min-width and max-width.
Apart from that, you can use CSS media queries to make styles that only apply if certain conditions are met, like a minimum or maximum width. If you use that, you can change the whole look and feel of your website, for instance by hiding parts on smaller devices or change from a 2 column to a 1 column text presentation on smaller devices.
A percentage-based width would change the width depending on the screen size, but you should also use min-width to ensure the page doesn't become too thin that it ruins your content.
Your options:
Use a narrower fixed width. Staying under 1,000 pixels is fairly safe though not perfect
Use percentages for page width instead, though this is difficult if you need to have a set width for child elements to look right
Do a combination of the above and use media queries in your CSS to make your site responsive. It'll fit every screen width you specify AND you'll have full control over your layout at each trigger point.
Here is a great resource for learning about responsive sites - this is the way to build a modern website, so though it might seem confusing it's worth every minute you spend on it.
http://bradfrost.github.com/this-is-responsive/resources.html
Good luck.
I had to redo a website from flash to html/jquery.
Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.
So, How would do I make it stretch or resize properly,
Is there a property which I can set somewhere that would resize everything proportionately?
You should use heigh / width in percentage(%) rather px / em. change the css file.
Is there a property which I can set somewhere that would resize everything proportionately?
No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.
Is there a property which I can set somewhere that would resize everything proportionately?
Everything? No. Font sizes won't adjust based on window size (at least not without JS).
You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.
The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.
The property called Media Query we mostly use this property with Responsible Web Design. In which we tell browsers change the specific css property at that particular screen size.
Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/
& for Responsible Web Design mostly use value in Percentage instead of Pixels .
Check THIS website for more reference.
unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:
Use relative widths for things (percentages) instead of absolute value
no hardwired sizes, keep them in separate CSS documents
work your way up: choose a minimum resolution, work upwards from it. it makes sizing things much easier.
The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.
you can use with and height in percentage to set your screen for all resoulation..Give the 100% width to the body and the div you want give 100% width.