So I'm designing a portfolio page which will contain mostly header text with a few paragraphs and images thrown in for good measure!
My headings and one lined text will expand to fill the entire width of it's container which will be the wrapper.
<div id="wrapper">
<h1>I'm a heading</h1>
<p>I aim to fill just one line regardless of letter count</p>
</div>
Now, I have been searching the net for a solution which will allow me to achieve the above. I have found both bigText.js which doesn't work no matter what I do and fitText.js which doesn't automatically size text to it's parent container without editing the .js to find a font size that suits - even then it's not pixel perfect.
My question therefore is, With a wrapper that I wish to keep just 35% of the screen (centred), am I best to keep as a percentage (fluid) or use a fixed width? and with either option, what's the correct way to adjust the font-size to fill the wrapper width correctly?
Thanks in advance,
Simon
Use percentages and a 'margin:auto' if you want it centered.
Read up on other frameworks how they work around this problem:
Twitter Bootstrap works well for my work.
Related
I have a main wrapper with a background image and the background image should extend to cover all of these elements. My HTML looks like this:
<div id="main-wrapper">
<div id="header"></div>
<div id="scroll-down-arrow"></div>
<div class="additional-content"></div>
</div>
I would like the calculate the height of the screen size and position "scroll-down-arrow" at the bottom of the screen and then position "additional-content" below the fold (not viewable area of the screen).
I have read the positioning tutorial here on W3 School: https://www.w3schools.com/Css/css_positioning.asp but still can't figure out the best way to accomplish this and position the content below the fold while maintaining the background image size of the main-wrapper.
Here's how my mock-up looks like, let's say the blue border is the viewable area on the screen, then the elements should be arranged like this:
Preferably I would like this to be pure CSS but I am also open to do the screen height calculation with JS as long as it's mobile responsive. Can you share a Pen or sample code if you have done something similar to this?
Your viewport height is window.innerHeight, so anything placed beyond that will be off-screen below, and anything placed before that (such that element.top + element.height < 0) will be off-screen above.
(To help with that, you can always get "the actual position of an element on the page, right now", probably element.getBoundingClientRect())
However, note that "the fold" is kind of a terrible notion given the huge range of possible browser sizes, not just desktop vs. mobile but also within desktop and mobile classes.
Instead of trying to figure out where the fold is, just make sure your main content is CSS'd in such a way that most of it's immediately visible at various media size breakpoints instead of trying to position things based on viewport/element coordinates after the fact.
And remember that the CSS vw and vh units exist specifically for this purpose.
I drew the problem so you can better understand it:
So, the question - is it possible to get the same position for both blue elements?
I can't just add "padding-right" - in different OS/Browsers scrollbars can have different widths...
Is it possible to do with css?
If not, is there a JavaScript solution to get the scrollbar element's width and center blue elements manually?
You could add a invisible wrapper around the blue box that takes up all the space in the parent minus the width of the scroll bar. That would make the blue box the same size as in Container 2 all the time.
Just make the scrollbar always visible instead of trying to come up with a clever solution. Depending on your content/app the scrollbar is propably always visible 95% of the time (at least if was like this whenever I ran into such a problem).
I have a center page column design that simulates a piece of paper. On some pages there is hardly any content, however, I would like to keep the middle column at least, say, 1000px, even if there isn't that much content (to keep the footer at the bottom of their viewing screen). Of course, where there IS more than 1000px's worth of vertical content I would like for the page to scroll normally. Is there an idiomatic way to go at least? Would it be wise to use javascript, can you use javascript?
Look at css sticky footer, at http://www.cssstickyfooter.com, I think this is what you are looking for! Also, you can set a div (The wrapper div) with a min-height: 1000px. This should help you.
Yes, use CSS min-height.
min-height:1000px;
This way you will have at least a height of 1000 px but if the content is larger it will automatically expand.
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.
Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm