As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor:
/* automatically magnify business-card-style page in large viewports */
#media (min-width: 50em) and (min-height: 64em) {
/* start with 100% at 50em, we'll have 150% magnification at 75em */
html {font-size: 2vmin;}
}
However, when tested in Google Chrome, it made the zoom feature to mostly stop working.
Is it a bug/feature in Chrome for the zoom to immediately stop working with the above code in place, or is it by design and by the spec?
AS per definition vw/vh/vmin/vmax are units related to the viewport width:
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
div{
height: 3rem;
border: 1px solid red;
margin: 1rem;
}
The following div has style="width:10vh"
<div style="width:10vh"></div>
The following div has style="width:10vw"
<div style="width:10vw"></div>
If you see in the example, as you resize the window the divs are changing its width. If you apply zoom but the view port doesn't change size it will not apply any change.
Maybe you have to check any additional property set in the viewport meta tag in your html header and check if its blocking the way it should scale on zoom. This article could help you to check it https://css-tricks.com/snippets/html/responsive-meta-tag/
Related
I am trying to create a fixed position navigation element the height of which takes up to a certain percentage of the viewport height. This is achievable using Viewport Units:
.header-nav {
...
position: fixed;
height: min(10vh, 50px);
...
}
Note that the same effect will be observed if either the window is resized or the browser zoom level is adjusted.
Within this navigation element, I would like to achieve the same effect for the size of text so that it does not overflow, and so my font-size needs to respond to my viewport size as well
.header-nav {
...
position: fixed;
height: min(10vh, 50px);
font-size: min(1.5vh, 16px);
...
}
Here is the problem: on Safari, Viewport Units as applied to font-size will respond to changes in the viewport induced by resizing the window, but not by changing the browser zoom level. Thus, if the window size does not change, 1.5vh resolves to a fixed pixel value, which is susceptible to UI scaling, and results in text overflow as the browser zoom level is increased.
I have tried using the CSS "locks" technique to achieve the desired effect, however this solution relies on using Viewport Units to calculate the current size of the viewport, and so suffers from the same issue.
I can use media queries to provide roughly the same effect:
#media screen and (max-width: 768px) {
.header-nav {
font-size: 10px;
}
}
#media screen and (max-width: 640px) {
.header-nav {
font-size: 8.33px;
}
}
#media screen and (max-width: 550px) {
.header-nav {
font-size: 7.14px;
}
}
/* ...and so on */
This would solve the overflow issue, but it's not perfect, and would cause the text to snap to (slightly) different sizes as the browser zoom level is increased (not to mention it's a lot more code).
Is what I am trying to do possible in Safari using only CSS?
vh and vw units are always "locked" to the size of viewport regardless the zoom level it remains the same.
If you want to change your font-size according to the zoom level use rem property instead which is bound to the root element font size which changes with the zoom level.
font-size: min(1rem, 16px);
I'd like to increase the size of the header logo for mobile phone view only. When I tried adjusting the css on a test site the whole thing crashed. I changed these max-height numbers:
I saw there were calculations in the code for mobile - does changing the numbers possibly break that?
#media screen and (max-width: 767px) {
.header-home-link.has-logo {
height: auto;
max-height: 64px;
}
}
#media screen and (min-width: 320px) {
.header-home-link.has-logo {
height: auto;
max-height: 50px;
}
}
From your question, it would seem as though you are editing an existing piece of code so there may be other factors I'm not aware of. However, your current setup works by making every width greater than 320px set the height to 50px and every width under 700px have a logo height of 64px. This contradiction may have caused some issues, however, I know chrome prioritises the rule that is later in the code thus creating a window under 320px where the logo height is 64px. For a cleaner solution, I would suggest putting the height for the logo for all other screens in your main CSS without a media rule and adding a max-width media rule with a width of 500px or so for the height of your logo.
Also is there a particular reason why you went for the approach of setting a max-height and then setting the height to auto as opposed to changing the height of the image directly and then setting the width to auto if necessary?
If you're still having issues I can also suggest trying to isolate the issue by testing aspects of your code with simple statements you know will work.
I have an image which I'd like to scale according to the following rules with increasing importance:
normally has a width of 38% (of the parent/screen);
not become smaller than 300px;
never become larger than 100% (of the parent/screen) (only an issue if the parent/screen is smaller than 300px;
That is to say: the image takes only a percentage of the available space but should not become too small on smaller screens. However, for very small screens (mobile devices), the image may never exceed the full width of the available space, even if this would mean it shrinks below the minimum width.
I thought I could do this with the following css:
img {
width: 38%;
min-width: 300px;
max-width: 100%;
}
thinking that the max-width would take preceedence over the min-width because it appears later. But it is not working... The image appears as the required percentage and is not shrinking below 300px. However, on a small screen (<300px), the image extends out of the screen (scrollbars appear).
Reading the docs, min-width overrides max-width, so I should have seen this coming...
One obvious solution would be to add a media query:
#media screen and (max-width: 300px) {
img {
min-width: 0;
width: 100%;
}
}
However, I would like to be able to override the width specifics (i.e. the 38% or the 300px values) from within the html (tag style).
Several questions on SO touch on the topic of sizing, but I could not find one about my exact case. Anyone here with a solution/suggestion?
Some side requirements:
should work in major browsers, html5/css3
no javascript (if it turns out that it's not possible with css only, I will create a js solution, but I prefer no js for this)
no media queries (see above)
I am in control of the html, so nesting inside additional elements is fine if needed
If min-width overrides max-width, then the solution is to not set min-width to a value that can become greater than the window width.
In other words, swap around the values for width and min-width. Then you won't need media queries or JavaScript.
img {
width:300px;
min-width:38%;
max-width:100%;
}
<p><img src="https://via.placeholder.com/999x333"/></p>
<p><img src="https://via.placeholder.com/999x333" style="width:400px"/></p>
In this example, both images are never smaller than 38% and never larger than 100% of the window, and the first image prefers 300px while the second one prefers 400px.
(Note that the images themselves say they are "999×333"; you should ignore that.)
In general, I want my body div to be 60% width of the window size. But there are some exceptions.
On a large monitor, this gets too big, so I have set a max-width of 800px, like so:
#lbp-text-body {margin-top: 100px; width: 60%; max-width: 800px; text-align: justify}
This works pretty good, the text adjusts within a certain range, but at certain max threshold holds it shape.
Now I want to do something similar for small window sizes.
I've added 'min-width: 300px;' and this seems generally seems to override the width 60%, However, if the screen size is less than 300px, the user will have to scroll horizontally to see part of the text.
I would prefer for the actual width size to change 90% or 100% after the viewer size hits the 300px threshold.
Any ideas on how I could do this?
You can use a media query to achieve this: JS Fiddle Example
#media only screen and (max-width: 300px) {
#lbp-text-body {
// Whatever Styles you want to have at 300px or less
}
}
You can also use media-queries to have specific styles if the window is greater than a specific width using min-width.
#media only screen and (min-width: 800px) {
#lbp-text-body {
// Whatever Styles you want to have at 800px or more
}
}
As a side note, you will want to be sure you have the correct viewport meta tag for media queries to work properly on each device: Viewport Meta Tag
I woul use a media query to determine the size of the screen, and change the % width based on that:
#media (max-width: 300px) {
width: 90%;
}
The browser will read through your existing CSS and apply the styles you described in your question. The media query tells the browser to apply this new width to any screens that fit the criteria - a screen that is at most 300px wide. If you have other breakpoints (in this case, widths) that you would like to target, you can definitely use more than one media query at a time.
See: detect browser size and apply css for every resolution
also: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am looking for a way to do a full width (but not full height) HTML5 video.
Something like what the background-cover CSS for images would let me do.
Example:
http://photohack.rs.af.cm
Where the image bar below the header would be replaced with a full width video background.
Width 100% and setting the height do not work, since the video is auto-scaled, and not full width.
Thanks!
In most cases its a simple fix.
video {
max-width: 640px /* cannot exceed this width */
max-height: 390px /* cannot exceed this height */
width: 100% /* 640px or less depending on size of viewport */
height: auto /* automatically calculates height from via above values */
}
Always! Always use percents when dealing with full width videos, responsive design and mobile. The only time it is okay to use pixels is when defining the max-height and max-widthproperties.