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 }}
Related
I have built a simple page and embedded a couple of Instagram posts.
https://bjoernschefzyk.co
The problem was, that in 100% of cases the Insta widgets increased the width of the container div, which introduces horizontal scrolling on mobile. I partly solved this by putting the Insta code in a div with width: 300px;, however on Chrome on Android and for some reason also the LinkedIn in-app browser on iOS, that doesn't work consistently. The problem seems to be that the Instagram widget renders wider initially, then gets resized, but at that point the container div is already wider.
Here an example of how the issue looks like:
Any ideas how I can fix this?
You are having max-width: 500px property applied to container, iframe( 540px) and content section, so it extended to reach it's max width on smaller screens. This is the matter of responsive. So change the max-with to 100% when the screen is smaller than 500px:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%
}
}
Next, the width of the '#content' element is still exceed the view width because your box-sizing property by default is content-box which mean the width is 100% + padding + border px . Change it to border-box instead, then the final CSS should be:
#media screen and ( max-width : 500px ) {
#content {
max-width: 100%;
box-sizing: border-box;
}
}
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; }
I need some CSS code to make my site fit the whole screen in different resolutions, however if screen goes too small, stop resizing and become scrollable. I've tried using a div covering the whole screen, and then setting width and height to 100%, with min-width set to 800px and min-height set to 600px, but its not working. Any ideas?
PS: Solution must be pure HTML/CSS, JavaScript is not possible for me now.
Try this:
http://jsfiddle.net/6CpbZ/
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
The concept is making the width or height or both 100% and then defining a min-width or min-height.
I have a web page who's content width is about 900px, but the minimum width (because the header image is larger than the 900px) is about 1200px. This means that when I view my page from a screen that is less than 1200px but larger than 900px, the web page will have a vertical scroll.
I would like for the scroll to appear only when the screen is smaller than 900px-wide.
I've tried adding an overflow-x on the body container, hoping that the body tag takes on the width of my screen. This works in all browsers except on IE7, which I would need it to work in aswell.
Is there a method that would allow this to work?
Let me know if I'm not clear in my explanations.
You might consider using an expression in IE. It's a bit slow but will help you out for older browsers. The CSS would look something like this:
div.container { min-width: 900px; overflow-x: hidden; }
* html div.container { width: expression(Math.max((document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth), 900)+'px'); }