I've a modal window that I want to take the full screen. I've got it to have 100% height but width isn't working. I've tried using min-width: 100%; but that gave more than 100%.
https://jsfiddle.net/k5adr0wc/
Just click on that img icon or the modal buttons. I've also tried
.remodal-is-initialized {
display:inline-block;
width: 100%;
height: 100%;
Add the following to your CSS:
.remodal {
max-width: 100% !important;
}
Here is a JSFiddle demo
The problem is in the following media query. You have a max-width of 700px.
Remove it and it will work.
/* Media queries
========================================================================== */
#media only screen and (min-width: 641px) {
.remodal {
max-width: 700px;
}
}
Also remove the padding on the .remodal class.
.remodal {
width: 100%;
margin-bottom: 10px;
/* remove padding */
padding: 35px;
...
There also seems to be a problem with the #outer div. You have overflowing content which produces a second scroll-bar on the right.
I also noticed at the bottom of the modal there's a little gap of just empty space? How do I get rid of that?
Related
My current website is this https://resillience.in
It is completely responsive below 1440px and works fine
But it looks wierd when viewed at 2560px as shown below
Don't want to change the things also in % to make it responsive at 2560px
How to fix the view at 1440px and have a work around like shown below
If viewed at higher, it adds padding from both sides.
Also adding max-width:1440px in the main html css file, I cannot achieve the desired result
The following code also might not solve
#root {
max-width: 1400px;
margin: 0 auto;
}
Because some of the images are having its css property as
position: fixed;
right: 0;
In general,you can apply this CSS to your #root element:
#root {
max-width: 1400px;
margin: 0 auto;
}
This will limit the overall width at 1400px and center it horizontally when the window is wider than 1400px.
I don't know if there are any details in other pages of your website which would cause a problem in conjunction with those settings (I don't see any at first sight), but this would be an easy, general procedure to get what you are asking for.
add justify-content: flex-end; to right side menu and I had changed some CSS to look beautiful. Please go through this.
.jss6 {
justify-content: flex-end;
}
.jss7, .jss18 {
margin: 0 10px; /* to add space between a tag and dropdown */
}
.active {
border: none;
}
.active::before {
position: absolute;
height: 6px;
width: 100%;
background: #3672c0;
content: '';
left: 0;
bottom: -3px;
}
try do the following:
#root {
width: 100%;
}
#media (min-width: 1440px) {
#root {
width: 1440px;
margin: 0 auto; // for centering
}
}
setting the width to fixed-size might solve the issue, from my quick review, why? cuz u probably used width: 100% inside the root div, so setting the root div to fixed-size always be related to that 100% = 1440px; :) let me know
I'm trying to make a Bootstrap ui Modal that is both vertically and horizontally center align .
I tried this solution , that indeed vertically centered the modal , but when I tried it with my own template (with 800px) it lost its horizontally center:
i.e - http://plnkr.co/edit/vp3IWIcrpGG6ehH8JKVe?p=preview
How could I achieve this modal with vertically and horizontally center with my own template ?
Note - The width and height of the template is dynamic so the solution should be appropriate for any width and and height .
the reason the modal lost its center is due to this css rule:
#media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
}
since your template has a 800px width, it overflows its container (the .modal-dialog div)
if you set .modal-dialog to width: auto it'll be fixed.
example: http://plnkr.co/edit/cYoYOgN1iMUzPKJuBw9H?p=preview
I did just override .modal-dialog with
.modal .modal-dialog {
max-width: 800px;
width: 100%;
}
this. Because it has fixed with:600px; which should be max-width:800px;
For smaller screens, I added margin auto so it doesn't go down.
#media (max-width: 767px){
.modal .modal-dialog{
margin:10px auto;
}
}
Plunker demo
I'm having the same issue as my previous question: div doesn't expand all the way horizontally
All I have in my render() function is
render() {
return (
<div className="container intro-body">
</div>
)
With CSS for intro-body like so (for color)
.intro-body {
height: 582px;
background-color: #3BC5C3;
}
On full screen on a 13 inch Macbook, the left and right sides are white spaces. It seems like there's padding or margin of some sort.
But when I shrink my window to about half the size, it reaches the left and right sides
Can someone explain this strange phenomenon? Is this something in Bootstrap that I'm not aware of? I was told to use container-fluid but 1. I think it's removed in Bootstrap 3 and 2. It didn't work when I tried it.
If you look at the bootstrap source you would see that .container has fixed widths for every media breakpoint except for extra small devices, and .container-fluid has full width for all media breakpoints:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
So if you want to have fullwidth for every media breakpoint, use .container-fluid.
First thing first : you have to put a reset css link (it must be the first one). You can find one here: http://meyerweb.com/eric/tools/css/reset/ then if you want the container to match the total width of a div element it must be a container-fluid
I have 2 divs with content that uses JQuery slidetoggle to show/hide, but I want the second to occupy all the remaining vertical height of the screen.
$('.heading').click(function (e) {
$(e.target).parent().children('.content').slideToggle("fast", "swing");
});
jsFiddle I started: http://jsfiddle.net/LMHgM/
Any ideas how this can be done without resorting to javascript? Hopefully this should be browser resizing and other element resizing should keep this greedy div in the correct state. Currently my only solution has been to trigger my own resize method on slidetoggle and browser resize to correct the height.
Thanks.
You should specify the height as 100% to the element and also to the body and html
DEMO http://jsfiddle.net/kevinPHPkevin/LMHgM/3/
body, html {
height:100%;
}
#second {
border: 1px dashed blue;
height:100%;
}
Basically it is collapsing to fit content, not expanding to fit the page. You can also put a wrapper div around the divs with position: absolute and height: & width: 100%
Updated fiddle: http://jsfiddle.net/LMHgM/2/
.wrapper{
position: absolute;
height: 100%;
width: 100%;
}
Seems the best solution is to use display: table to divide up the screen.
.wrapper {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
}
.group {
display: table-row;
}
http://jsfiddle.net/LMHgM/5/
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;