Is there a way to change the maximum width of the container(body or html or etc...) so that in a larger screen I can maintain the sizes of the elements as they are in a maximum width screen?
I've been using 'vw' for all the dimensions and want to know whether there is a way to set a maximum size for a 'vw' unit.
Related
I am using vh and vw units to style certain elements of a page. It's all working well when the initial containing block and viewport are of the same size. This is what it says in the spec:
The viewport-percentage lengths are relative to the size of the initial containing block.
But this way vh and vw are not the size I want, so how can I change the size of the initial containing block so that my vh and vw units are relative to this new size?
The size of the initial containing block is always the same as that of the viewport. You can't change this size (except via the viewport meta tag, which probably isn't what you're looking for).
#Pete Because my page is already styled in vh and vw units, and it's looking OK. But I wan't to fix the viewport size past the certain screen width, so that my design doesn't stretch.
What you want to do is write a media query for when the screen exceeds a certain width, then replace all your dimensions that use viewport units with your desired values.
So I have text that I want to automatically resize based on the size of its container. However if I use something like
font-size: 5vw;
it looks good, but when I shrink the page the height starts getting way too small
Is there anyway that I can resize the text based on both vh and vw so, for example, if I just decrease the width of the page the height doesn't decrease too?
like if I only decrease the width of the page, I want the height of the text to stay the same and vice versa.
Basically I want the text to always fit inside the box perfectly and have same proportions no matter what the size of the page/container is?
Is there anyway to base font size on both vh and vw like this in CSS/HTML?
You can look into the vmin and vmax units.
While 1vw will return 1% of the viewport width and 1vh will return 1% of the viewport height, 1vmin will return 1% of the smallest viewport dimension, be it either the viewport width (vw) or its height (vh). Equally 1vmax will return 1% of whichever viewport dimension is the largest.
In order to have a whole container, including its text, to retain its aspect ratio you will have to apply the same kind of unit to both the container dimensions and its font size.
See the following example in full page mode and play around with the window width and height:
p {
width: 80vmin;
font-size: 6vmin;
}
<p>Try resizing both the width and height of the output frame. The <p> element and its contents will both respond to whichever dimension is the smallest.</p>
Note
Internet Explorer 11 and Edge 12 does not support the vmax unit. More on browser support here.
I have been using vw for some time now. I typically use a larger vw for the mobile first (anything under about a 700px viewport). I then adjust everything above that 700px viewport to one a size fits all vw value. That coupled with bootstrap's ease of use flexbox classes gives much less overhead to the css content.
Images displayed in goolge images end squarely at the right hand side of the page regardless of image dimensions or screen size. I was thinking that perhaps it is possible to add some sort of dynamic padding to make images fit squarely into a div? If anyone has any suggestions on how to do this it would be greatly appreciated!
Define the height of each row and the minimum and maximum width you want.
Calculate the width of your image if you scale it to the given height.
If the calculated width lies between the minimum and maximum width, scale it to this size.
If the width is smaller, scale the image so it has the minimum width, and crop it so it has the proper height.
If the width is bigger then the maximum, scale it this way and crop it, so it has the right width.
In order to make all the images fit the row perfectly, you might need to adjust the minimum and maximum width. Especially images which need to be cropped anyway can be used to adjust the length of the row.
You can achieve this using CSS (& JavaScript) or by doing it on the server side. If your page width is dynamic, you have to rely on CSS/JavaScript though.
What's the basic difference between [width and height] and max/min[width and height] and where should we use each of them?
Thanks in advance........
The basic difference is that width and height will specify the exact width and height of an object. Max/min width and height will specify the maximum or minimum height and width that an object needs to be.
Say you had a div that you wanted to load images into, but you wanted all images to be the no larger and no smaller then a specific width or height, then using min/max calls would be ideal.
In other cases, where you know the width and height (say for only a specific image) then you do not need max or min height/width calls.
It is also important to note that max/min height and width calls will over-ride height and width calls.
Here is some more information:
CSS Height and Width
CSS Tests - Min and Max
width/height give you the strict constraints. max-height/max-width tell your element to be not wider/higher than a certain value, but the element can still be smaller than that value.
max-height/width are commonly used when you want to make the site behave according to the screen it is viewed on, but to not be super huge on the large screens anyway. The same about the elements - you might want to accept images of any size, but want to make sure they are not breaking your site layout. Hence you use max-width/height.
They don't work in IE6 though. If you need to support min-width/height in IE6 you can use regular width/height. IE6 will treat them as minimum values anyway and will expand them in case content needs more space. Both min/max width/height work fine in IE7+
I have a page with several arbitrarily-sized blocks of content. Is there a way I can:
Allow these blocks to resize larger or smaller to fill all available space as the window size changes,
Specify a minimum size for each of these blocks,
Hide the block completely when it will not fit on the page at the specified minimum size.
I have full control over the HTML and CSS. I would strongly prefer a solution without Javascript.
#dark; may be you want a fluid website. So,
1) give width in percentage instead of px to the div for re size larger & smaller.
check more http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
http://www.alistapart.com/articles/fluidgrids/
2) yes you can define min-width for your block like
.block{
min-width:20%;
}
3) For hiding a block or change in design with certain window size you have to define min-width or max-width in media query.
check the link
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://nathanstaines.com/demo/media-queries.html
http://css-tricks.com/css-media-queries/
For the 1st, you can set width and height with a % value. This will cause the "blocks" to resize as the "window size changes". For the 2nd, you can set the min-width and min-height, so that whatever the size of the window, the blocks will not shrink smaller then your specified values. As for the 3rd, you will have to use javascript.