I understand that this is a confusing question but I can't think of a better way to word it! Basically, I need a div element to always be 80% of the height of the page, and have the div's width always be the same width as the height (not 80% of the page width, but rather, the same length as 80% of the page's height, so that the div is square.) I've researched quite a bit and have yet to figure out a way to do this. I'm open to using JS but would prefer to use only CSS to accomplish this. Here is essentially how I want my layout to look at several different page heights/aspect ratios:
MY PAGE LAYOUT
The blue div should be 80% of the page height and should always be square.
The reason I need this is because I want the page to never have a scrollbar, so the div must be responsive to the page height, but I also want the div to be a perfect square.
Thanks!
You can use vh -> 1vh being equal to 1% of the height of the viewport's initial containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/length
So your class would be something like:
.yourClass {
height: 80vh;
width: 80vh;
}
You can declare both width and height in vh units, which represents 1% of the viewport height. In this case, that'd be
div{
width:80vh;
height:80vh;
}
That being said, it's a really bad approach. If the viewport height ever gets bigger than the width (e.g. on any mobile, or a resized window), you'll get horizontal scrollbars or hidden, overflowing content.
For such case, it'd be much better to use vmin, which is 1% of whatever the smaller viewport dimension
div{
width:80vMin;
height:80vMin;
}
Alternatively you can use media queries to detect if the viewport is at landscape (wide) or portrait (tall) mode
#media screen and (orientation: landscape) {
div{
width:80vh;
height:80vh;
}
}
#media screen and (orientation: portrait) {
div{
width:80vw;
height:80vw;
/*or whatever*/
}
}
.equalSize {
width: 80vh;
height: 80vh;
background-color: red;
}
<div class="equalSize"><div>
You can use css build in units. vh = viewport height
https://www.w3schools.com/cssref/css_units.asp
Another option would be to use aspect ratio like explained here: Aspect ratio
Related
I'm seeing this kind of code
#media only screen and (max-width: 300px) {
width: 200px;
min-width: 200px;
}
And I couldn't reason about it. Is this an error or correct? If the width is larger it make sense but in this case where both values are the same I scratch my head to reason about it.
It is a Media query that is specifying the width properties min-width and width for screen sizes less than 300px.
What is puzzling is, as to which CSS (div?) element are you applying these width properties?
min-width and width pointing to the same value means that the width (usually of an element) cannot go below 200px when the screen size falls below 300px (per your media query) and the width can stay at 200px. You can also specify a max-width which can either be equal-to/greater-than 200px but less-than 300px.
I'm creating a site using bootstrap.
I would like to prevent the window from resizing at all from a certain point and downwards.
I currently have it set at:
html, body{
min-width: 300px;
max-width: 3000px;
min-height: 550px;
max-height: 1500px;
}
seems to work perfectly for the width, once the window reaches 300px in width, the width of the window locks and cannot be scaled down any further.
for some reason though, it will not work for the height, no matter what parameters and dimensions I set, I can fully scale the height of it.
Not sure how to work around this so that once the window reaches 550px of height, the height also locks and cannot be scaled down any further.
Any help would be appreciated. Thanks!
thats not an an issue, actually what you are saying, is device width not the document or window width, if you are worried about responsiveness, no device exist on the world whose height can be changed, atleast i dont know,
this should not be an issue, you are scaling the browser's(device) height and width , but the actual window sizing is working same like the width, ,,
i mean that css code is working fine, but you cannot notice that,
It's because max-height overrides height, but min-height always overrides max-height. So you can't use them in the way you intend.
You need to target with media queries:
body { height:550px }
#media (min-height: 550px) { body {height: 100vh }}
#media (min-height: 1500px) { body { height: 1500px }}
I'm using bootstrap and I made a nice website. At the end I wanted to center it and make some ad space on the sides, so I used this:
#wrap {
width: 1200px;
margin: 0 auto;
}
My website was fully mobile responsive, the navbar turned into a buttton and the post gradually got more stacked as opposed to being in a grid (it's sort of like a news/magazine type of thing)
How would I go about centering it while keeping it responsive, to make it look better/make ad space on the sides?
Try width 100% and height 100% instead of fixed pixels
You may want to use max-width as by using width you are stating that it is always 1200px wide (regardless of the device width).
The max-width property is used to set the maximum width of a given
element. It prevents the used value of the width property from
becoming larger than the value specified for max-width.
If you put fixed pixels, this size won't vary when the screen size shrinks. You can try adding media queries that change that fixed width. For example:
//for screens smaller than 600px, adapt the width to the full width of the screen
#media only screen and (max-width: 600px) {
#wrap {
width: 100%;
}
}
Try giving % instead of using px to width.
#wrap { width: 90%; margin: 0 auto; }
How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.
If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.
width:20%;
max-width:100px;
This sets the width to 20% but caps it at 100 px.
One way to accomplish this is to simply use two divs
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer {
max-width: 90%;
}
.inner {
max-width: 100px;
}
</style>
This will NOT work with different image sizes/aspect ratios. You can define max-width and max-height separately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.
Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.
.img-class {
max-width: 50%;
}
#media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
Tested on latest Chrome, Firefox and IE.
You can now use css min. But you should note that IE does not support it.
width: min(20%, 100px)
https://developer.mozilla.org/en-US/docs/Web/CSS/min()
I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a width would not satisfy the requirements.
To expand on #Kiaurutis' answer:
img {
max-width: 400px;
}
#media (max-width: 400px) {
img {
max-width: 100%;
}
}
A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).
To adjust for margins, borders and other stuff you might have on the image, just increase the #media's max-width.
Don't do this.
I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-width property to the lower of the two values, not the width. This also can be done, please see below.
Note: This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-width property is the lesser of 20% or 100px.
img {
max-width: 20%;
}
#media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
img {
max-width: 100px;
}
}
I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS
.wrap{max-width:95%;margin:0px auto;}
#media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
I have some question about html and css.
Here are the case. I'm building a mobile web, which my base line is 240px width. So all my elements's dimension is set base on the 240 screen size. But when I view the web in a larger phone like Samsung Galaxy note. All things seem to be too small for user to click on it.
Now the question, is it possible to use variable kind of css for width and height ??
Lets say, the thumbnail I use in 240px width device is 50px, so when I view my thumbnail in a 480px width device, the thumbnail will be display in 100px, which means the thumbnail will be increase its size based on the percentage of the screen increased.
Yes, obviously you can, what you are looking for is called Responsive Design, to accomplish that, you will need #media queries.
Demo (Resize the window to see the effect)
div {
height: 200px;
width: 200px;
background-color: tomato;
}
#media all and (max-width: 400px) {
div {
height: 100px;
width: 100px;
}
}
Use percentages for your width instead of fixed width to make the images responsive.
For example, use 100% instead of 50px. It will automatically fill the container (in which the container is also responsive) and automatically resize on your browser.
yes ,it is possible,responsive design achieve in following ways,
All dimension in %
media queries
yes, you can use #media queries for responsive design
example:
div{
width: 50px;
}
#media all and (min-width: 480px){
div{
width: 100px;
}
}
(or) u can also use percentages at certain cases like width: 20%