A design for our page calls for the font size to be set to 4.5% of the current viewport width, and to max out at 43px.
Not sure how to accomplish this in Stylus -- font-size: min(4.5vw, 43px) is what I would assume that I would use, but it's giving me the vw calculation at all widths.
Stylus (and any preprocessor in general) cannot do that, because 4.5vw is calculating in a browser runtime, at compile time Stylus doesn't know the browser width.
Related
I'm trying to set a specific (large) monospace font on iOS/iPhone. In CSS I've set font-family: monospace (which Steven fixed recently) and font-size: 56pt but it doesn't work (I get a pretty small monospace font). I've also tried with font-size: 200% which also just gave a small font.
Since it is quite slow to find right size by trial and error testing on the device, is there a way to understand exactly what font gets selected on the device based on the css definition?
This will also help check up against Apple/Android documentation to ensure picking supported sizes. I searched in the CN1 code as well but didn't find any code doing the conversion.
http://www.akaskyness.com/
This is in the early stages of development. I want this "cover" page to be non-scrollable, with the height of the white|black background adjusting to the height of the browser window. At the moment, when reducing the height of the browser window, the headers don't shift up proportionally and a scrollbar appears. I'm not really concerned about browser width at the moment because I haven't added any code for that yet.
I think I see what you mean - you want the <h1> and <h2> elements to shift vertically as the viewport height is resized, so that they don't end up off the screen (when it gets too short) and create a scrollbar.
In your current CSS, you try to do this using margin-top:17% on <header>. This seems like a logical approach, except something curious happens: the margin-top never changes, regardless of how you resize the browser vertically.
I'll be honest, this stumped me for a while, so I did some searching around about margin behaviour and found out this critical piece of information: "The percentage is calculated with respect to the width of the generated box's containing block." So the browser height is completely ignored in the calculation! If you resize the width of your browser, you can actually see how your headers move up and down on your webpage.
Well, that completely invalidates using a percentage margin to attempt to vertically align <header> relative to the viewport height. What now? Vertical alignment of elements is actually something lots of other developers have tackled in various ways. Here's a simple one that uses absolute positioning, by only rewriting the styles for <header>:
header {
margin-top:-3em;
position:absolute;
width:100%;
top:50%;
}
Here's a JSFiddle demonstration of this new CSS. Note that margin-top:-3em; is a bit of a guess on (half of) how tall your headers are, so if you don't want to hard-code that value, you'll probably have to look at a different approach for vertical alignment (this is just one of the easiest). Also, if you don't want it vertically centered, just change top:50%; to a different percentage value.
Hope this helps! Let me know if you have any questions.
I have made a responsive design on Wordpress and have adjusted everything. The whole layout and slideshows and plugins adjust to the window width, but I can't make the fonts responsive. I have tried many different options with percentages and also now with Vw and Vh. It does work but viewport width and height units have too big intervals and unfortunately when the window resizes the changes are very dramatic. I need some smooth way of reducing font size with the window size with little changes and also preferably minimum width to be set to some fixed unit. Please help me, is it possible with just CSS?
Sounds like you want to have pretty fine control over the font sizing.
There's a great article over on CSS-Tricks that outlines some of your options. Chris recommends using vmin to control the font-size. After experimenting I'd recommend using vmax because it will select the max of vw and vh, which kinda serves as the minimum font-size you mentioned.
Something like:
p {
font-size: 2vmax;
}
Also note: there's a bug in Chrome 20+/Safara 6+ that prevents the font from resizing itself according to the new viewport size.
If this isn't fine-grained enough unfortunately I think you're going to have to use js. I'd recommend going with one of these fine plugins:
SlabText
FitText
I've been trying to learn responsive coding lately, and the books and tutorials i've gone through have been constantly shifting between using ems and percentages. So i was wondering, when is it appropriate to use ems, and when is it appropriate to use percentages?
Just to clarify other answers, ems do NOT cascade but percentages do. Think of it this way: ems are relative to the current element and percentages are relative to the container. So using a percentage to specify the width of a div inside a div will indeed make the inner one smaller (or larger) than the outer one, but using ems to specify the widths of the same nested divs will specifically make them the width you expect them to be. Generally, you should use ems to specify font typography and percentages to specify element sizes, if you are wanting responsive design.
This is really a preference. Some will tell you to set body{font-size: 62.5%;} (which is 10px if the browser's default is 16px) and then use ems from then on. So, if you want a font-size of 22px you would use 2.2em. However, most developers have their own opinions on this matter. Some use percentages always. Some use pixels always.
em is the measurement relative to the current font size, such as:
body{font-size: 16px;}
.someClass{font-size: 1em;} /* 16px */
.someOtherClass{font-size: 2em;} /* 32px */
.anotherClass{font-size: .5em;} /* 8px */
If no font-size value is set for any parent elements in the document, the browser's default (most likely 16px) font size == 1em.
Percentages work similarly in that they are relative to the parent container, as opposed to the parent container's font size.
body{width: 800px;}
.someClass{width: 100%;} /* 800px */
.someOtherClass{width: 200%;} /* 1600px */
.anotherClass{width: 50%;} /* 400px */
The issue to look out for in both scenarios is that they both cascade meaning that if you have two classes set with font-size: 2em and you nest them, you will have 4em on the inner element.
em and % both are good for responsive web design.
As everybody said em is generally used to define font sizes and % for element like <div> sizes.
But I found in my experience that using % for elements when you have fonts inside the element can make you element adjust according to the length of font inside it.
For example, if your statement inside the element is completing in 20px 100% is going to give it 20px and if it got completed in 10px, the 100% of div is gonna give it 10px.
So if you are giving some design to a div where you have some fonts/words inside, better use em for preciseness.
I'm building a website (summer-band.com) and trying to tweak the mobile settings (browser at < 600px) with 100% width settings for several of the elements. Unfortunately, with what I've done so far, the header/ container and the navigation bar as well as the footer all seem to be shooting out different widths and I can't seem to fix this on my own, thus asking for some assistance.
First, the menu: #navigation li a and #navigation li.current_page_item a's width is 100% but has a padding, so the box model won't do what you want. The width should be auto. This is a recurring problem of yours.
Next, the header: You have #headerImg's width set to a constant 600px. In your media query, you'll probably want to make the width and height auto and make the actual img's width 100%.
Moving down, your main #box has a width of 100% and a padding. Due to the box model, this probably won't do what you want. Make the width auto.
Further down, your #footer has a display of inline-block and a width of 100%. You'll probably want to change its display to block and width to auto.
I think that's mostly it, but you might want to set article img's max-width to 100% and remove the explicit width on your Kickstarter screenshot. I don't really know how to deal with the iframe with the video. Sorry.
A few last comments: You seem to be overusing brs and empty p tags rather than using appropriate margins.