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/
Related
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
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
When i make websites, it fits on my screen, but when i open the website on another screen, it doesn't work correctly (The divs overlaps eachother). It's the same when i resize the window. I saw a couple of posts about this, but still, no good answer. I tried making a container to put them all in. But it's still the same.
Any answers, why this is happening?
Container CSS code:
#container
{
width: 960px;
margin-left: auto;
margin-right: auto;
}
I put it into HTML like this:
<div id="container">
Content goes here
</div>
EDIT: Guys, i don't think you understand me. When i'm on another screen resolution, all the divs moves. I think everything moves, if i'm not completely wrong. I would like to know the real way of doing this. What do you do?
http://i49.tinypic.com/8wwo6r.jpg
http://i48.tinypic.com/359ydc9.jpg
FINAL EDIT: I fixed it with the percentage. It seems to work quite well! Thanks for all your answers! I know this will give me a kind of bad reputation, because i didn't make myself clear enough.
You can use percentages instead of pixel.
#container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
You can figure out percentages having screen resolution and the size you want using this forumla:
WidthPercentage = ContainerWidth / ScreenWidth * 100
So for your example if your screen resolution is 1360x768:
WidthPercentage = 960 / 1360 * 100 = 70.5%
This is called responsive design.
You can find some guidelines here and some good articles here.
If you don't want to use percentages, you can go with Responsive Design and Media Queries. Basically, you call different CSS rules based on different browser properties (for example: width). See a nice tutorial about this here (you can also see it in action).
Quote:
The second part of responsive design is CSS3 media queries, which currently enjoy decent support across many modern browsers. If you’re not familiar with CSS3 media queries, they basically allow you to gather data about the site visitor and use it to conditionally apply CSS styles. For our purposes, we’re primarily interested in the min-width media feature, which allows us to apply specific CSS styles if the browser window drops below a particular width that we can specify
You've set your <div> (<div id="container">) to be 960 pixels wide. If you view the page in a browser window that's less than 960 pixels wide, then the <div> won't fit in it.
Your question isn't very clear. You've said "when i open the website on another screen, it doesn't work correctly", but you haven't said how it doesn't work. To get help, you need to describe the following three things with enough detail:
What you've done (e.g. what code you've written, what steps you're taking to run that code)
What results you expect from what you've done
What results you're actually getting
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.
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.