Currently I'm trying to fix a div class to always be 80% of the screen size if that's possible? I don't want the div to resize when I change the size of my browser, would I be better using media queries?
.main{
width: 80%;
min-width: 80%;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
You write
I don't want the div to resize when I change the size of my browser
Well, then use a fixed width in pixels:
.main{
width: 600px; /* or whatever value you wish */
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
overflow: hidden;
}
If you always want your div to be 80% of screen size. use viewport units. vw in your case which means viewport width.
This way your div will always be 80vw out of 100vw which is the full viewport size.
See below
.main {
height:100px;
width:80vw;
background:red;
}
<div class="main"> </div>
Related
I'd like to know if it's possible to make a div responsive and at the same time make its content scrollable within certain dimensions (max/min height).
Here is my attempt
http://codepen.io/anon/pen/rVEbWG
While the width is responsive the height remains the same (while I would like it to be 100px min and 400px max).
.wrapper {
overflow: auto;
max-height: 400px;
width: 50%;
}
.content {
overflow-y: auto;
}
Simple, just use the vh css unit for the height, like so: height: 100vh
.wrapper {
overflow: auto;
height: 100vh;
width: 50%;
border: 1px solid red;
}
.content {
overflow-y: auto;
}
The 1 vh unit is relative to 1% of the height of the viewport, meaning that your div will be dependent on the height of your viewport.
If your viewport will be smaller than the div, you will be able to scroll trough it.
I'm looking for a way to keep a modal dialog within screen bounds, i.e. that its height is always less than the screen height and the width is adjusted accordingly. I tried:
.modal-dialog {
max-height: 100%;
}
but this doesn't seem to have any effect.
http://jsfiddle.net/ma4zn5gv/
An illustration:
I prefer a pure CSS solution (no js) if it exists. For clarity, I'm looking for max-height, not height (i.e. is the modal is no taller than screen, leave it as is).
Use viewport units with calc. Like this:
.img-responsive {
max-height: calc(100vh - 225px);
}
...where the 225px corresponds to the combined height of the top and bottom sections of the viewport which surround the dialog.
Also, in order to take care of the width of the modal we need to set a few more properties:
.modal {
text-align:center;
}
.modal-dialog {
display: inline-block;
width: auto;
}
Updated Fiddle (Resize the viewport height to see the effect)
Alternatively:
We can replace calc with a padding + negative margin technique like so:
.img-responsive {
max-height: 100vh;
margin: -113px 0;
padding: 113px 0;
}
FIDDLE
PS: browser support for viewport units is very good
Target the modal-body and not the modal-dialog.
Add the following to your CSS:
max-height: 80vh;
overflow-y: auto;
It should look like this:
.modal-body {
max-height: 80vh; overflow-y: auto;
}
Adjust the VH height to preference.
Script
$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('max-height',$( window ).height()*0.8);
$('.modal-content img').css('max-height',(($( window ).height()*0.8)-86));
});
Fiddle
Since the default value set to auto and 100% in width and height. you just be able to modify; the image inside the viewport and the target ID, as follows:
/*let target has the same value as modal-dialog*/
#myModal {
width:auto;
height:auto;
margin:0 auto;
}
/*modify image inside modal-dialog*/
.modal-dialog,.modal-dialog img { /*same value to avoid overwidth*/
width:70%;
height:70%;
margin:0 auto;
}
Here's the DEMO in jsfiddle.
You also can separate it into, as follows:
.modal-dialog img {
width:100%;
height:100%;
margin:0 auto;
}
.modal-dialog {/*modify the modal-dialog*/
/*ONLY CHANGE THIS, NOT others (#myModal or .modal-image img)*/
width:60%;
height:60%;
margin:0 auto;
}
UPDATED DEMO:
If you ensure that the parent elements have a height set, then you should be able to do it pretty easily. I have given the header and footer 10 percent heights hear and the body 80 percent so that it all adds up to 100 :)
.modal, .modal-dialog, .modal-content{
height: 100%;
}
.modal-header, .modal-footer {height:10%;}
.modal-body {height:80%;}
.img-responsive {
max-height:100%;
}
Fix the container size first, then set modal-dialog size.
For example:
.modal{height:100%;width:50%;margin: 0 auto;}
.modal-dialog{overflow:hidden; max-height:96%;}
Fiddle
If you provide max-height and max-width to 100% then it will take automatically accordingly screen but as you want this dialog size smaller then you will have to set max-height and max-width to some fix value.
As you have already used responsive model dialog so it will change dialog size automatically as per your screen size.
Try following css it may work as per your requirement. you can change max-height and max-width accordingly, margin-left and margin-right used for center align.
.modal-dialog {
max-height: 225px;
max-width: 200px;
margin-left: auto;
margin-right: auto;
}
Hope it may help you.!!
Try working Fiddle with some css changes.
css:
.modal-dialog {
height: 100%;
margin: 0;
padding: 10px;
}
.modal-content { height:100%; }
.modal-body {
position: absolute;
padding: 15px;
left:0;
right:0;
top: 55px;
bottom: 65px;
margin: auto;
}
.modal-body > p {
height: 100%;
margin: 0;
}
.img-responsive{
max-height: 100%;
max-width: 100%;
margin:auto;
}
.modal-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
I think you should use overflow: hidden on .modal-dialog, with a style to mantain the image proportion.
The code is here:
<div class="entry-page-image">
<div class="featured-image-container">
<?php the_post_thumbnail('large'); ?>
</div>
</div><!-- .entry-page-image -->
Effected by this css:
.entry-page-image { position: fixed; display: inline-block; top: 0; margin: 0 0 30px 30px; margin-left: 260px; float:left; width: 100%; }
.featured-image-container { height: 100%; width: auto; }
.featured-image-container img { height: 100%; width: auto; }
However in Firefox the browser takes the standard 1024px high image, and wont scale it down to be 100% of the browser window height. I'm aware this is quite a common problem, but I can't seem to rephrase my code to the right effect.
Anyone fancy shifting it about for me?
The issue here is that height:100%; on .featured-image-container sizes the height relative to the height of its container.
In this case, the height of the container is equal to the height of the content in the container (the natural height of the image).
If you manually set the height on html,body to 100% then you'll find that the height of your div is now as you'd expect.
Example: http://jsfiddle.net/EyLHG/
html,body{
height:100%;
}
.container{
width:auto;
height:100%;
border:1px solid red;
}
img{
min-height:100%;
}
Update
Also, setting the width of the image to auto will cause the width to be the default width of the image rather than of the container. Setting the width to be 100% will fix this scaling issue:
Example: http://jsfiddle.net/EyLHG/2/
just saw your website, I think there is image still in below the browser as well, I think you might need to add position:relative; to .entry-page-image
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.
I am trying to make a multi-column layout where each column is filled with images.
There must be horizontal scroll for the container of the columns, but the column gap must not change on window resize, and the last column must be able to be shown clipped on the one side.
The coloumn height depends on the parent container and when the window height is changed, the images must be reаrranged in order to fill the column with whole images (an image should not be clipped horizontally).
img {
height: 70px;
width: 100px;
}
.container
{
height:400px;
overflow-x: scroll;
overflow-y: hidden;
-webkit-column-width: 100px;
column-width: 200px;
-webkit-column-gap: 20px;
column-gap: 20px;
}
Here is a jsfiddle of what I currently have:
http://jsfiddle.net/9dL2F/1/
Do you have any ideas how this can be done?
This is tricky. The container's entire width is divided into columns, so you can't have both a fixed column-width and column-gap. As the container's width changes, the browser wants to fill the container. See Fixed gap between CSS columns.
You could manage the width of .container: (see jsfiddle)
#media (min-width: 480px) { .container { width: 480px; } }
#media (max-width: 480px) and (min-width: 360px) { .container { width: 360px; } }
...but that's a lot of queries to manage!
Does vertically-ordered images matter? If rows are fine, you could abandon CSS3 columns:
img { display: inline-block; width: 100px; height: 70px; margin-right: 20px;}
Similarly, you could float:
img { float: left; width: 100px; height: 70px; margin-right: 20px;}
I haven't used them, and there is no IE support yet, but you could try CSS3 Flexboxes.
None of these are pretty, but I don't know of a beautiful solution...maybe CSS4 will save us?
Mr.Anson says right. I should manage other columns:
2 left-columns in fixed position, 1 right-column in fixed position and content (or, container is auto-resized depends on the browser windows, as follows:
.in-content{
position:absolute;
height:auto;
color:#2d2d2d;
float:left;
left:280px;
top:33px;
bottom:auto;
right:14%;
padding:0px 10px 39px 0px;
text-align:justify;
text-decoration:none;
text-transform:none;
z-index:-33;
overflow:auto;
}
#media (min-width:27%) {.in-content{width:40%;}}
#media (max-width:40%) and (min-width:27%) {.in-content{width:27%;}}
That's all ^_^
Thanks.