I'm working on website and have to convert from psd(photoshop) file to html and there was one issue that webpage was very big like 3300px x 2800px and I zoom out it 40.881 % to fix website size. And now size is good on 1366x768 resolution, but for example on 1280 x 700 or bigger resolution website is always scrollable horizontally or there are white space in right side.
How can I depend on screen resolution zoom in or zoom out my background?
set the image with and height to 100% on css?
width: 100%;
height: 100%;
Use the vw and vh units for your measurements. Example:
h1 { font-size: 0.5vw }
Would make the font size if a h1 tag half the viewport width of the element that it's contained in.
The vw adjusts according to width and vh to height.
Related
My work requires 100 windows next to each other having the smallest sizes possible.
Image: https://i.imgur.com/Yg2St2U.png
a. For height, it is limited by the message box, which I reduced to 88px by adding this in the userChrome.css
* {
font-size: 3pt !important;
font-family: Leelawadee !important;
}
This is the smallest legible font size and font for me, so I'm satisfied with 88px height.
b. For width, I added this in the userChrome.css
#main-window:not([chromehidden~="toolbar"]) {
min-width:20px!important;
}
But Firefox's windows refused to be reduced under 126px, which I'm very frustrated about. I know the limit is 100 pixels, so I just need to reduce my window width to 100 pixels, it would help me a lot. So,
Can you suggest a way to reduce the message box size while increasing the font size?
Can you tell me how to reduce window width to 100px?
1) for font size you can use 'font-size' in css and specify the size that you want, if you have a box as a div element give an id to it and in css specify a width:
<div id="box">Something</div>
css:
#box {
width: 100px;
height: 100px;
}
p {
font-size: 1.5rem;
}
keep in mind that for size and positioning of an elements is recommended to use a framework like bootstrap.
2) You can use window object that has this methods
window.open
window.resizeTo
with these two methods you can open a new window and resize it
Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.
The problem exists for any height set with vh, I think.
I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh.
Any clever ideas?
I'd recommend using 100% instead of 100vh - you can add this...
body{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!
https://codepen.io/will0220/pen/KXqoGZ
Problem: I have a page that looks terrible <480px and doesn't display enough relevant information to the user.
Attempted Solutions:
(ex. 320px screen) set the initial scale to 1.5, but then I need to set the scale accordingly for all the screen sizes between 320-480px.
(ex. 320px screen) set the width of your viewport to 480px, however this makes you need to scroll around the screen instead of zooming out like setting the scale would do.
Question: What it seems I need is a combination of the two solutions. One that will scale my viewport, but only until it shows a min-width such as 480px worth of content on the screen. Is this possible without javascript or is solution #1 what I would need to do?
Other considerations: Solution needs to work on all browsers/mobile (IE11+)
I'm not 100% sure what you are trying to do but if I understand correctly, you can set this in css. Setting the width to 100% will keep it flexible to your viewport window & setting a minimum width will not allow it it get any smaller than that.
html,body {
width: 100%;
min-width: 480px;
height: auto;
}
Have you attempted to use media queries ?
For example:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
I want to set an iframe.children video of any website as a div.parent background. the children iframe will always be bigger than parent div and parent div overflow will be hidden. Iframe will also keep aspect ratio. I found some jquery plugins but I want to understand how it works. Please help me.
What you're talking about is basically intrinsic ratio†. A ratio must maintain width and height at a constant relative value so when width increases or decreases, the height of a video does likewise of course. We can do this by creating a container (usually a <div>) that has the desired dimensions (usually 16:9 for widescreen or 4:3) and place the iframe and/or video within that container.
The technique commonly employed for a responsive video embedded within an iframe is as follows:
box (a.k.a container, or wrapper)
This div will be triggered by any re-sizing. For any element in the DOM a re-size involves calculation of height and width at the least.
Further down this post I made a simple demo.
Notice the width: 100%and the padding-bottom: 56.25%.
If width increases from 100px to 200px , then height increases from 56.25px to 112.5px.
The ratio of 16:9 is constantly maintained by setting the padding-bottom: 56.25%. If you have an older video with the aspect ratio‡ of 4:3, you'd use padding-bottom: 75% If you have a non-standard aspect ratio like 8:21, you can find the padding-bottom percentage by dividing the denominator by the numerator like so: 8/21 = .38 = 38% (The quotient was rounded down).
So the funky padding-bottom percentage acts like an inflatable cushion that inflates or deflates according to when width changes, but only enough to re-size the height within the parameters of the ratio.
The extra padding-topis to counter the huge padding-bottom otherwise the video will be pushed too far and cause overlapping of elements. The height:0 is probably not necessary as this weird value was to deal with I.E.6. I just left it in there just for that edge case (you know just in case you time traveled back to 2001 or you live in a cave in the middle of the Gobe Desert.)
iframe
The rule sets for the iframe are a lot easier to explain. Simply put, the iframe (and the video) height and width are stretched to fit perfectly within .box. So basically it's .box that does all the work and the iframe goes along and conforms to the dimensions of .box.
.box {
position: relative;
padding-bottom: 56.25%;
/* [56.25%= 16:9 ] [ 75% = 4:3 ] [ 41.66% = 24:10 ] */
padding-top: 25px;
height: 0;
}
.box iframe {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
<div class="box">
<iframe id="ifrm" src="https://arcx.s3.amazonaws.com/av/test.html"></iframe>
</div>
By now you should be thoroughly confused by my ramblings, so I strongly advise you to read these articles:
Creating Intrinsic Ratios for Video
Fluid Width Video
What is Aspect Ratio?‡
A Box with an Intrinsic Ratio†
What I am looking for is a CSS equivalent of jQuery's $("div").css({"height":screen.height/10})
I have heard of CSS media queries and I like them, but I don't know of anything that could even do something even close to that. I know how to use min-height query:
#media (min-height: ... /* some height */){
div{
height: ... /* 'some height' divided by ten */
}
}
but it only gets 10% height of the browser window (not what I'm looking for!).
And I can't just simply use height: 10% because the div is nested in another element that has a set height in pixels.
I also can't use height: 10vh because the viewport's height is not at all the device screen's height (tested in Chrome and IE; If you want proof, resize the window. You'll notice that the height changes as the window's height changes)
NOTE:
I am asking that the div be 10% of the device screen, meaning that if the computer's monitor (the device screen) has a resolution of 1280px by 800px, then the div should be 10% of 800px, which is 80px. Also, if the window resizes, the div's height should not change, because even though the window is resizing, it is impossible to resize the physical computer monitor or phone screen
It's not entirely clear what you are referring to but there IS a CSS property for this.
It's the vertical height unit (vh)
Each vh equates to 1% of the vertical height of the screen / viewport.
JSfiddle
CSS
div {
background: red;
height:10vh;
}
CanIUse reference
MDN reference
You can use min-device-height instead of min-height:
#media (min-device-height: ... /* some height of the screen*/){
div{
height: ... /* 'some height' divided by ten */
}
}
This also applies to the other dimensional queries such as:
min-width -> min-device-width
height -> device-height
width -> device-width
for more visit Mozilla's guide for CSS queries.
Use window.innerHeight:
document.getElementById([DIV ID]).style.height = (window.innerHeight / 10); // Gets window height.
window.onresize = function() { document.getElementById([DIV ID]).style.height = (window.innerHeight / 10);
See here: https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight