How can I make the header area not overlap at http://androdevlab.com when viewed in a mobile browser?
You should use media queries. You can read more about media queries here:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
You can also use plugins like FitText.js - http://fittextjs.com/
Looking at the code for your site in Firebug, the main issue is that the line-height of the line 'A portable lab in NYC of Android devices delivered to your door' is too big. It's currently at '1.8' without a value. Try setting it to a smaller value of maybe 1em or 1.25em. Likewise for the nav-primary li a class.
Also, the width of the nav element is defined as 980px so on any device, this would be a fixed value. Maybe you can try setting a % or em based value.
If you need to change many elements for the mobile version while keeping the #screen CSS the same, you should use media queries. Makes things much easier to handle.
you should use various responsive design tricks. like setting the: meta viewport tag, #media queries adjusted css. specifing the margin and sizes in the header with % or em instead of px of other set sizes etc. you could use js libraries like syze and projects like html5boilerplate to help you with this.
Related
Ok. Here is the thing. Like we can use width:100% of an element and it'll take the full width of its container. How can we do that in case of fonts?
I have tried using 100% or em etc but that's not working.
Let me explain the actual problem. Here are three versions of a div. Please see the images.
1- Desktop
2- Android
3- iPhone
You can see that the text "Quote and Buy Online" is in the same line for Desktop and Android (which is the requirement) while it is in two lines in iPhone. Whereas the font-size is the same for all three. Now, that's the problem.
One way is that I reduce the size of the font until the problem gets solved for iPhone but it would then be much smaller for Desktop and Android.
If somehow, I tell the font to adjust its size according to its containing div then the problem will be solved.
Please note that I have checked the solution here but It says it won't be dynamic. So looking for a better alternative.
Here is the link where you can find the form.
This is not possible with pure CSS. You have 4 options:
1) Define the font size for certain breakpoints, to fill up as much as the container as possible, cross browser/platform.
2) Use Viewport Percentage Units: vw as described in this SO answer
3) Use a JS library to fill the text of the parent container, eg:
BigText
FitText
4) Apply a font size that fits the container well, maybe tweak it after 600px +; and live with the fact the font won't fit exactly 100% of the container.
I recommend no.4 for your specific requirment - there will be no JS dependancy, it's simplest to apply and it won't make that much of a difference for your requirement. Maybe the form would look better if you align the text to the left as well. I think no1 and 2 are a bit of an overkill.
You may want to look at using media queries to hit this across the device spectrum. One for iPhone portrait is below, but you will likely have a few to align for all devices.
#media screen and (max-width: 320px) {
.selector { font-size: 10px; }
}
.selector = your class or id of the button or any other html selector or tag.
I personally would go with a screen based fixed figure as you know it is going to render exactly over a scaling method. my 2c worth.
Further Reading: http://css-tricks.com/css-media-queries/
I make use of percentages by specifying the width of elements I want to stretch and percentages when specifying "left" "left:40%;" for example and a relative position. This allows elements to move with the page when it's resized and stretch but at certain resolutions sizes the elements don't entirely stay in place. Am I stuck using media queries for this issue or is there another way? I'm still using media queries but I also don't want my design breaking so early before reaching breakpoints, I want it to be as flexible/elastic as possible before having to have media queries kick in.
I think instead of worrying about those wacky sizes where your page looks funky, you should think about the most common screen sizes that are actually used.
I know exactly what you mean about those breakpoints. That's why I use screenfly to test my site on the most common screen sizes and work from there.
And if your site elements aren't maintaining your desired positions, then you are probably calculating the percentages wrongly. Here is a great article that helped me with fluid layouts and how to set up the percentages and what-not: http://www.creativebloq.com/css3/create-fluid-layouts-html5-and-css3-9122768
Use float: left with a percentage width instead, and that should accomplish what you need. If you're using left: 40% for an offset (gap or spacing), try using margin-left.
There are many types of display that people use, so it is hard to expect what resolutions will your user use to view your site. To avoid this problem, I am thinking using percentage instead of pixels, em and pt to define the web layout. However, is this a good practice to do this? Including using the percentage, eg 80% for the main wrapper ?
I know it is hard to do it when it come to determine the width of the inner element. I'll have to calculate the percentages based on the each div's parent. How do you guys cope with this problem when it come to different browser's resolution?
Css media query is best solution for this check this http://css-tricks.com/css-media-queries/
There's obviously debate between fluid and fixed layouts, but fluid layouts can work very well as well.
An example is smashing magazine (try resizing your window with the site loaded).
I believe that it would be a lot easier if you use a framework of some sort. If you have used any grids CSS framework before, you can have a look at Liquid Blueprint. This allows you to work in a grid based manner, but have the page fluidly resize according to the browser's size.
I use percentages for every width within the outer container but have min-width: and max-width: for the container itself, so it scales a small amount. Say 960px for min width and 1160px for the max width. This way it works larger screen sizes better and if I want to I can go back and make it responsive because its already all in percentages.
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.
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.