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.
Related
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 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
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 want a webpage, with the content centered, and specify a minimum width so it resizes on small screens of smartphones, but still looks fine on PCs.
If I set the width of my div to 1024px, and margins auto, then the div stays centered when the browser window is stretched wider than that.
But obviously this requires the user to scroll sideways if they're viewing the site on a small screen.
So I tried changing width to "min-width:480px" and the div does not stay centered in a large browser window.
I've done lots of googling and the blog/forum posts for this very topic claim that all you have to do is set min-width and auto margins.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
*
{
padding:0;
margin:0;
}
#content
{
margin: 0px auto;
min-width: 480px;
background:#BBB;
height:800px;
}
</style>
</head>
<body>
<div id="content">
<span>content</span>
</div>
</body>
</html>
At this stage I'm only testing in Chrome.
That's because min-width is a constraint and not a width declaration. Auto centering using margin:0 auto only takes a width declaration to work. One suggestion would be to just define a width for your #content area and add a #media query for mobile devices with a width of 100%.
e.g.
#content { width:960px; }
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
#content {
width:100%;
}
}
min-width will kick in as the div is told to be smaller than the min-width value. If you set the width of the div to be width: 1024px;, then it will always be 1024px. However, if you set it to a percentage value (ie. 100%, 93.75%, etc), it will scale down, and the min-width value will kick in once 100% < min-width. So set the width of the div to be a percentage value, and you should be good to go.
Also, I'm not a huge fan of wrapping all of my content in a single, all-encompassing content div. Maybe I'm just picky, but IMHO, thats what the <body></body> element is for. And you can add margin: 0 auto; to just the Body element, and that will center the everything relative to the browser. Then the margins of the specific elements from there is up to you. Anyways, food for thought.
Yes, min-width will make your div 480px wide on small screens - it means that if the screen is smaller that 480px, your div won't fit.
The thing is, div is a block element so if you won't specify the width, it will stretch to be as wide as the parent element.
I would suggest to look into media queries
I hope it helps!
You have not specified a fixed width for your content container so by default it's going to take up the full width of it's parent.
And you can't set a min-width if you have a fixed width.
Typically, you'd have a separate CSS sheet just for mobile devices and use a media query.