I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
Related
I'm currently trying to make a responsive navbar (and it works, is responsive), but at some window size, it becomes too big. So I tried to use #media (max-width) to block its growth at some point. Unfortunately, when I use px to describe new fixed size, the navbar is now affected by scaling of the page (ctrl+mouse wheel), and I'm trying to avoid this behavior.
Is there a workaround to my problem?
Little hard to understand your question, but any good navbar should scale width wise for a page. I kinda sounds like you set the height style to a percentage rather than pixel amount.
<div style='height:80px;width:100%;'>Content</div>
This makes a horizontally scaling bar, with a constant heigjht
I may well be asking for the moon on a stick, here, but: I'm trying to figure out how to get a two-colour background to delineate the two columns of the main content.
The background must be full viewport width (edge-to-edge), and the central content is responsive with a max-width of 960px, split into two columns; the first column is 2/3 of the width (max of 640px wide) and the second column takes up the remaining 1/3 (max of 320px wide). Probably the easiest way to explain it is with a GIF:
As you can see, the left-hand part of the light blue 'sidebar' background colour always lines up with the left side of the actual sidebar column. It was pointed out to me that the checkout on woothemes.com has pretty much this exact same effect (although I think you need to add something to your basket to see it). They appear to have achieved it with linear-gradient, and it boils down to this:
background: linear-gradient(90deg,#fff 53.5%,#f0f4f5 46.5%);
background: -moz-linear-gradient(left,#fff 52%,#f0f4f5 46.5%);
The problems are:
I don't understand these declarations at all - why are the second color-stop's values lower than the first (and why is the -moz declaration's first color-stop a different percentage)? Adjusting it doesn't seem to make a difference, but I definitely need to update the values, as they don't match what I need... but I don't get it.
Although the effect is close, it unfortunately is not perfect: for a start, the stop between the two colours is kinda blurry; and worse, the line does 'drift' when rescaling. Although it's only by a small amount, unfortunately it's enough to kill the illusion with the design I've been given.
I've tried a couple of methods, including variations of linear-gradient and a pseudo-element with percentage & calc()-based offsets, but I'm totally not getting it. I've debated whether this is something I can achieve with some super-clever SVG element handling, but I seem to be totally stuck on something that looks deceptively simple.
Is there a way to achieve this with pure CSS?
I didn't look into the woothemes.com example, but here's my take:
http://jsbin.com/jofeseseyo/edit?css,output
This would need to be adapted a bit based on the rest of the site, but the idea is: one container of max 960px, with two children (66.666% and 33.333% width). Each child has a pseudo-element that is absolutely positioned at the point where the two columns meet. Then they are z-indexed behind everything.
I don't know how the rest of your site looks, so I left the rest a bit arbitrary. The background color columns have a fixed height, right now at 200vh.
I've been searching for two days, and trying all sorts of different options, but none of them do what I want. I'm positive this should be possible through CSS, but haven't come across the solution yet.
We want to have a single-cell table that is 100% of the page width, but a fixed page height (although we may be able to work around a % page height.) The table should either contain an extremely large image (that gets sized to 100% of the table width) or have a background image that does the same (so it never repeats, and just sizes up to always stay 100% of the table.
However, when the window is shrunk down, we want the table height to shrink, and "cut off" the image at either the top or bottom.
So far, I have no problem with the expansion issue, but I have yet to find a solution that shrinks the table height at all. It either downsizes by the correct ratio for the new size of the page, or it stays exactly the same size.
Can anyone offer any suggestions?
It would help if you posted a sample HTML and CSS, but in a more generic sense, I'd point you out to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and adding overflow: hidden to the DIV that contains the image.
I'm trying to make two divs fill up with width of the page using the viewport parameter vw. However, the divs' widths are not accurate and the overlap. DEMO
I could enclose them in a container and set the widths using % instead, which gives the desired results. DEMO
My question is, why do it not work with vw? If it is because viewport is inaccurate, how inaccurate is it? And what are the causes for viewport to be inaccurate?
UPDATE: When I load the first DEMO, it initially overlaps. However, when I move the slider of the window left and right several times, the overlap disappear. When I try this on my test site, the overlap is also there, but doesn't go away however I resize my window.
It's because your body has a margin. Set the padding/margin of the body to 0, and now it'll work.
The vw param in CSS is based on the whole viewport, regardless of the container it's in (% takes a percentage of the container). If there is not enough space in the container, you'll get behavior like this.
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope