I would like to have a vertically and horizontally centered div that is 70vw wide and 70vh high. Something like this:
.centeredBox {
width: 70vw;
height: 70vh;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
However, I don't want the width and height to be recalculated every time that the viewport's size changes. If possible I would like the 70vw and 70vh to only be calculated at page load, so it starts at that size, but also stays that size regardless of if the browser window is resized. Is it possible to convert vw or vh values to a pixel count?
Please, no Javascript. I need this "NoScript compliant".
No, it's not possible with CSS. I would suggest to play around with pixels and see what comes close to what you're thinking.
Speaking for myself, I wouldn't choose pixels though. The beauty of relative units is that they allow you to build something suitable for different devices. Why wouldn't you want your design to be responsive?
Related
I'm not a coder (which will soon become apparent) but I'm working on something for a work project and I'm stuck on the final bit.
I need to add a calc() working into the scale but it just won't work. Without going in to the in's and outs of why I need this, I know generally there would be better ways of doing what I want to achieve but I just want to know how I can get this working the way I need it.
I want the Transform: Scale() to adapt in size relative to the viewport size. I would assume from my research I add a calc() function using 100vw and my other workings.
I've put where I am so far below the scale function works as should i.e indivual values from 0-1 change the scale up to 100%. The Calc() function works fine with basic sums i.e 10 - 5 gives a value of 5 and 500% zoom but as soon as I add 100VW it stops working please please help!
body {
margin: 0;
padding: 0;
width: 100vw;
text-align: center;
}
#wrap {
width: 1535;
height: 900;
padding: 0;
overflow: hidden;
}
#frame {
width: 1535;
height: 900;
overflow: hidden;
-webkit-transform: scale(calc(100vw/1535));
-webkit-transform-origin: 0 0;
}
Two things here.
Your #wrap and #frame need to have some kind of unit on their widths. So this is your chance to change sizes relative to the viewport. For example, if you want them to be 1535px wide when the viewport is 1920px wide, but you want them to maintain that ratio as the viewport shrinks, set them to be 79.947917vw wide. (1535 / 1920 = 0.79947917). You can do something similar with the heights as well.
A scale transformation doesn't need units. Scales take a unitless number, which serves as a multiple of the element's original size. So scale(2) is twice as large as normal, or scale(0.5) is half as large as normal. You can also use two numbers to adjust the element's width and height differently. For example, scale(2, 3) would make the element grow to twice its original width and three times its original height.
Since transforms are relative to the element and not to the document, this means that you don't need to use any kind of calc inside your transform expression because having the element itself shrink and grow as the viewport shrinks and grows will also cause the amount of scaling to shrink and grow proportionally as well.
Positioning responsively is the most confusing thing to me. Ill give a simple example to help portray what i can't figure out. I have a div. I make the width and height a percentage and position it on the page absolute, top 25% and left 5%. All of this looks fine but when i resize the page it moves to 25% and 5% of that smeller screen resolution, and i can't get it to just stay there. I have a min-width and height so that the actual div won't resize, just where it is positioned on the page. How do i position something on a web page so that it is responsive, yet will no move all over the place when i resize the browser window. Sorry if I'm not really good at explaining this, i just never really understood how to position correctly.
Example :
#example_div {
width: 10%;
height: 10%;
min-width: 100px;
min-height: 100px;
position: absolute;
top: 25%;
left: 5%;
}
percentage values are always relative to the parent element (i.e. the on around the current element, which can also be the body or window).
pixel values are absolute. You can combine pixel and percentage values. If you want your DIV to shrink when you resize the window, but stay at the same position, use percentage values for width and height, and pixel values for top or bottom and left or right.
Simple question, probably really obvious but, I made a circular div that will be a floating action button. I want it to be the same size no matter the screen size or resolution. For example, if it's a half inch wide on a smartphone I want it to also be a half inch wide on an iMac. How can I achieve this?
.fab {
width: 58px;
height: 58px;
position: relative;
border-radius: 50%;
background: #F44336;
}
<div class="fab"></div>
there are 6 different units in which you can give width height to a element.
cm ="centimeters"
mm="millimeters"
in="inches"
px="pixels"
pt="points"
pc="picas"
here top three cm,mm and in are the units who dose not rely screen resolution etc. use one of these three units instead of px
I have a series of containers, all set to height 100% starting from 'body'.
I set 'article':
article {
width: 100%;
height: 50%;
margin: 0;
margin-top: 25%;
padding: 0;
}
The height works fine taking half of its parent's (or screen, doesn't matter) height, but the margin-top is definitely not 25%, more like three times it.
Live link: http://no-plans.com/temp/wp-tobias/wordpress/?p=51
Disclaimer: still dirty stylesheet, there might be inherited conflicts but I can't find any. I also tried to resize and put the margin to other parent divs, same issue.
As stated in the comment, margin percentages are relative to container's width: http://w3.org/TR/CSS21/box.html#margin-properties.
You can solve by absolute positioning and top (here the percentages are relative to container's height).
I have a div which i want vertically aligned to 50% of the height of the browser window at all times.
I don't know what the height of the browser window is going to be at all times, should the user scale this window. If placing it within another element is necessary, great, but as just specified, I have no idea how tall the viewport is going to be at any one time.
I'm not going to be using javascript either.
I have read through the site, i have gone hunting for a solution, but I really want to throw this out there (again) as I have yet to find a solution that does exactly this, either by hook or by crook.
Thanks.
You don't specify if the has a fixed height or not? If so then you can do this with one element, just add the following example CSS:
.centered {
height: 100px;
width: 100%;
background: red;
position: absolute;
top: 50%;
left: 0;
margin-top: -50px; /* half the height of the element */
}
You could use a number of techniques, depends on how you exactly want to implement it. Some (older) but still relevant reading here.