Okay so I am trying to get my website to fit all resolutions or screen sizes because I am currently working on a 17" 1920x1080 screen size and my website looks fine but when i try run it on a 10" or 15" screen etc the website screws up, the content goes everywhere (mainly drops down) So I was wondering how this can be fixed?
Thanks
First of all you should use percentage values (e.g. width:20%; instead of width:200px;) whenever you can, so you don't rely on absolute pixel resolutions (which often screw up your whole design/layout).
For all the other things and tuning you should take a look onto the css media query (e.g. w3schools):
#media screen and (min-width:1024px) {
/* ... */
}
It sounds like your web content isn't being positioned relative to a fixed width parent container, because if it was a scrollbar would load rather than your containers being pushed down. If you want to make the website layout respond to the screen size then you'll need to use a responsive layout.
Here's more info on getting started with responsive design/development:
http://www.w3schools.com/css/css_responsive_intro.asp
You can also look at using a framework which is really good for learning responsive grid lay outs (and much more). Bootstrap is one of the most popular mobile first responsive frameworks:
http://www.w3schools.com/bootstrap/default.asp
http://getbootstrap.com/
You could dive in learning few things:
Relative Lengths
Flexbox
Media Queries
Related
I have been teaching myself front end web development for a while now and have taken on several client projects with good success so far. I am currently working on the site www.thrivetech.com and having an issue. There are 3 text columns with images above each on the home page of this site, and I cannot come up with a good way to make them all stay the same height. At different screen widths these 3 columns change height and sometimes don't match. Squarespace objects are natively responsive, and when the screen gets small enough these 3 columns stack on eachother and look fine. I have added a lot of Custom CSS to change background colors, text colors, etc. but can't figure out how to make this work. Even if I remove ALL CSS and just have a plain white page with black text, these columns still do this and don't stay the same height. I have even contacted Squarespace support and they haven't come up with a solution. See image below:
I would include some CSS source, but it's best to navigate to the site at thrivetech.com and inspect the CSS to see what is going on. I have considered doing something like using JS and jQuery to get the height of all 3 of these, determine which is the greatest, then set the height of all 3 to the greatest height, but it seems like there should be an easier, more elegant pure CSS solution?? Thanks for looking!
RESOLVED:
I fixed the issue by using a media query to set the parent element of these 3 columns to display: flex; when the window is at least 640px wide. The reason I need the media query is because they need to display as blocks when the window gets smaller so we can take advantage of Squarespace's native responsive design so the columns will stack on top of eachother on mobile and smaller screens. Here's some simple pseudocode:
#media only screen and (min-width: 640px) {
#parentDiv { display: flex; }
}
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 not even talking about mobile (just yet), I set widths and heights that are based on the pixel count of my laptop's display, but on my desktop 22" monitor, everything's out of place, div lines are too short (larger display, so it makes sense), etc.
I'm thinking I should use strictly percents, so instead of "width:200px", it'd be "width:64%", would that be a good solution?
Also, I see some websites, they adjust the content when you shrink the browser window (looks like an effect of "margin:0 auto", just keeping things centered), but also, when the width gets small enough, it just stops adjusting, it stops because moving any more and the content will start moving to lines below it in order to fit... How can I get this same effect?
Thanks!
This is done by making your site "responsive" which basically means that you use a grid system that scales and the screen size changes.
There are a couple of frameworks out there that help with this. My favorite is Foundation (http://foundation.zurb.com/) but there are others like bootstrap (http://getbootstrap.com/)
There is a ton of documentation on these sites you should focus on the grid sections:
http://foundation.zurb.com/docs/components/grid.html
Hope that helps.
There are websites using the responsive layout. Means you have orientations/everything fixed for the mobile screens, tablets as well as full size pc/laptop screens.
They make use of a grid system.
Common ones are
Twitter Bootstrap (Two different versions having different UI and
approaches are available at http://getbootstrap.com/2.3.2/ and
http://getbootstrap.com/) This one's my favourite as its too easy to
use
Zurb Foundation
Skeleton
html5 Boilerplate
Sprout Core
Less Framework
You may pick any one you like. They all provide a basic css and javascript to handle things out nicely, a wireframe of a complete website is provided and an extremely well documented manual is available on their websites. Its actually fun and makes work faster.
Cheers!
One useful and recommanded unit is the viewport percentage length that will adjust accordingly.
for example to get a div the size of the window and another div on top of the first one:
<div id='one-page'></div>
<div id='inside'></div>
#one-page{
width:100vw;
height:100vh;
background:red;
position:relative;
}
#inside{
width:10vw;
height:10vh;
background:black;
position:absolute;
top:10vh;
left:20vw;
}
http://jsfiddle.net/xv7Yf/
As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}
Just spent several hours writing up for a new site... looks great in my resolution, 1366x768... However, even going down to 1024x768 means that not everything fits inside the screen width!!
Tried:
<style type='text/css'>
body {width:100%;}
</style>
This does have some effect on my resolution but no effect on smaller resolutions...
How can I make sure my webpage will fit 100% in all screen resolutions?
I use CSS #media directive, unfortunately, not supported by IE8-. Compliant CSS3 allow you to style differently according to the width of the viewport:
<style type="text/css">
#media screen and (min-width:1px) and (max-width:1365px) {
...
}
#media screen and (min-width:1366px) {
...
}
</style>
By the way, you have an error in your CSS, you forgot to specify the unit:
body {width:100%;}
One thing you might be interested in are CSS Media Queries. They aren't supported in every browser, IE for example only supports it as of the version 9 preview, but they can help with resizing windows as well as smaller resolutions, because you can apply different CSS rules to each screen size.
Apart from that, make sure that your layout isn't "rigid", i.e. don't treat divs like tables. Make their width based on a percentage of the parent, or use floating to get them to line up correctly. It is acceptable to have a "minimum width" of your site -- usually 800 or 1024 -- accepting that users on ancient resolutions like 640x480 will just have to scroll.
You will likely need to go back to the drawing board with your CSS and design it to readjust itself, and/or have a minimum width.
Unless you want to do all size measurements in percentages, I don't think you can. And even then, you'll have a problem if someone uses a resolution in a different aspect ratio or a really low resolution, because in the first case your page will be stretched or squished and in the second you could have layout issues.
Your CSS for the body tag look OK. But if e.g. all of the DIVs in your body have a fixed size, they will never fill out the whole width. Can you post an example of your page?
People tend to make websites 960px wide.
It is easy to split into even sized columns, as it is divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16, plus it fits nicely into the smallest (worthwhile) resolution of 1024px.
You can of course use fluid layouts, or various methods of detecting screen resolution, but if you are using a lot of imagery, it makes it a pita.
I would recommend you use a CSS framework. They build the foundations of your design so you don't have to worry about things like this.
My personal favourite is Blueprint as they take care of things such as typography and form styling not only the grid layout, which is what you're after.
960gs is another popular one which works in a very similar way to Blueprint. They also have a few tools to help you with customizing your development and is not as restricting as Blueprint.
They are the two I've used before, but I'm sure there are loads more.
Make layout stylesheets for the most common resolutions... let's say 800x600, 1024x767 and 1280x1024. Then load them with:
<link rel='stylesheet' media='screen and (min-width: 778px)' href='css800width.css' />
You can read more at CSS-Tricks.