I am using the default bootstrap3 css files.
I noticed that the default css width of the modal-dialog is 600px.
However I need the width to be 1000px for my screen.
If the screen is larger than 1000px the modal width still needs to be 1000px.
<style>
.modal-dialog { width: 1000px; }
</style>
This works correctly, however if I resize the window smaller than 1000px the dialog needs to resize responsively with the window width e.g. be the same as the window width.
When you resize the windows larger than 1000px it must stay the same width of 1000px.
I tried set
<style>
.modal-dialog { width: auto; }
</style>
but the behavior matches the default boostrap and the size is still the default 600px and if you resize that smaller than 600px it is adaptive. I basically want the same behaviour as default bootstrap css but for the size 1000px;
I tried combinations of the answers in the other stackoverflow question which deals with setting the modal dialog width but couldn't get a solution to work.
Just use #media rule
The #media rule is used to define different style rules for different media types/devices.
#media (min-width: 1000px)/* The minimum width of the display area, such as a browser window*/
{
.modal-dialog {
width: 1000px;
}
}
You should be able to do this by simply adding the following CSS properties to your .modal-dialog element.
width: 100%;
max-width:1000px;
This will make the modal be full width of the screen up until it reaches 1000px at which point it will stay at 1000px as the screen gets wider.
use this
<style>
.modal-dialog {
width: 1000px;
max-width: 100%;
}
</style>
Related
This is what I want
If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.
#media screen and (min-width : 750px) and (max-width : 900px) {
.multiSelect .checkboxLayer {
width: 600px;
}
}
#media screen and (min-width: 900px) {
.multiSelect .checkboxLayer {
width: 700px;
}
}
My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels?
I just tried to measure the browser width with photoshop and it splits at 975 px exactly.
So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!
The short answer:
You have not reset the box-sizing property for the parent container.
The long answer:
Consider this:
In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
There are two values in box-sizing that you should know about
content-box
[...] the default, and gives you the default CSS box-sizing behavior. If you
set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width.
border-box
[...] tells the browser to account for any border and padding in the
value you specify for width and height. If you set an element's width
to 100 pixels, that 100 pixels will include any border or padding you
added, and the content box will shrink to absorb that extra width.
This typically makes it much easier to size elements.
I usually start any CSS sheet with the following to avoid such issues
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
There are many frameworks that reset more of the default properties such as normalize.css but I often don't have the need to use them.
I set up a demo below. There are two div elements. There is also a media query.
Both elements have the same fixed width in px. The only difference is the value for the box-sizing
The first is set to border-box and the second is set to content-box
div {
width: 400px;
height: 400px;
margin: 3em;
text-align: center;
background: darkred;
border: 20px solid #131418
}
#media (max-width: 800px) {
div {
background: darkgreen;
width: 300px;
}
}
.first {
box-sizing: border-box
}
.second {
box-sizing: content-box
}
<div class="first"></div>
<div class="second"></div>
Notice how they render with different sizes even when the width for both is the same?
Scroll bar width is 17px on most browsers, and does not contribute to the screen width. Try using Firefox's responsive design mode, in the dev tools.
I'm currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.
However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having height: auto to adjust the image height correctly according to the width: 100%, without altering the image (aspect ratio) itself.
This does not work like intended however, using the following code:
#media (min-width:1600px) {
#header{
height:auto;
width: 100%;
min-height: 630px;
background-size: 100% auto;
}
#slidershadow {
height: 630px;
}
}
We need to have some min-height, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).
Is there a way to resize our slider responsive, but keeping the following in mind:
The aspect ratio of the image cannot be altered;
We cannot crop images too much (only slightly);
There is a minimum height to keep in mind;
If it helps, all images in the slider have the same size.
You have to give a max-width:100% to your img.
Plus background-size only works when you are working with background-images.
Since you are applying max-width to your img there is no need to apply max-width to its parent #header
Last, but not least try not use min-height and height:auto at same time in the same selector.
Below is a working snippet according to the above comments:
img {
max-width: 100%;
height: auto
}
#media (min-width: 1280px) {
#header {
min-height: 500px;
}
}
#media (min-width: 1600px) {
#header {
min-height: 630px;
}
}
<div id="header">
<img src="http://placehold.it/1920x630" />
</div>
I had my main div set with
max-width:600px;
However, when the content is not long enough that div will resize to the length of the content. Which makes sense.
So Instead I declared:
width:600px;
max-width:600px;
But now the div won't resize down when you resizing the window. I tried setting the min-width:
min-width:200px;
width:600px;
max-width:600px;
But it still won't resize down passed 600px (on window resize);
So what am I missing? Can I use all 3 width settings together? (min-width,width,max-width)?
If so, how? I am trying to understand the logic.
I want the content to stretch up to 600px, but also resize down on windows resize.
I think you want
width: 600px;
max-width: 100%;
This way, the element will attempt to have a width of 600px. But if the parent isn't wide enough, it will be less.
Demo
Just take out the "width: 600px" The div will be 600 px if the browser window is large enough, otherwise it will adjust down to your min width if the browser window is smaller than 600px.
You could use media queries to apply a width for certain screen sizes
.div {
width: 600px;
}
#media screen and (max-width 600px) {
.div {
width: 100%;
}
}
I really thought this would be elsewhere on stack overflow, but I searched fruitlessly for length of time. Forgive me if I missed it.
I have a set of images who need to be made as large as possible (width: 100% to container elem) as long as the container does not grow too wide or the image too tall because of the container width. Aspect ratio needs to be preserved.
I thought I could do this with
img { width: 100%; height: auto; max-width: 500px; max-height: 250px; }
The idea was that if the image hit either the max-width or the max-height given the width and the aspect ratio, it would no longer grow. In reality, this causes the image width to size as wide as possible, but breaks the aspect ratio (squishing the image to max-height) when it is too tall, instead of preventing the image from growing wider.
Is there a better way to go about this? I would like to avoid javascript if possible. My tests are in Firefox 9.
A bit old but using top or bottom padding will keep your aspect ratio. Divide height/width and apply that percentage to the padding top or bottom. It can get tricky sometimes but it works.
Here is a good article about it:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
You can use media queries to create a stairstep of fixed image sizes, and then go like this:
#media screen and (min-width: 701px) and (max-width: 900px) {
img {
width: 800px;
height: auto;
}
}
#media screen and (min-width: 901px) and (max-width: 1100px) {
img {
width: 1000px;
height: auto;
}
}
Not very pretty, but it works.
What I want to do is setup multiple div's that each contain the contents of an entire page. Each div should be centered in the viewport and fill it entirely. Each successive div should be evenly spaced vertically based on the variable height of the viewport. For example say I have a view of 800x600 then each div should be this size and stacked. So, if I scrolled down exactly 600px I would only see page 2 div, 1200px I'd only see page 3 div. I don't have any code or example to share and my exhausted searches have turned up nothing of this sort. Is this possible with just css?
You simply have to give your html, body & divs a height: 100%;:
html, body {
height: 100%;
}
div {
height: 100%;
margin-bottom: 5px;
}
http://jsfiddle.net/KMMjv/
Because this would vary depending on the size of the user's browser window you would need to JavaScript to detect screen height and position them accordingly. Although you could set the height of each div with just CSS (height: 100%;) you would need to set the top with JS.
Here is a working JSBin: http://jsbin.com/ogokef/edit#preview
Use the following units:
vh for viewport height
vw for viewport width
html, body {
height: 100vh;
}
div {
height: 100vh;
width: 100%; /* you can use 100vw too, but for height it must be vh */
}