I just read on this article that you can change bootstrap modal width with this:
.modal .modal-dialog { width: 800px; }
But when I do this, I loose the default responsiveness of the modal.
How can I change the width but keep the responsiveness on mobile?
Just use max-width. It will become responsive-
.modal .modal-dialog { width: 800px; max-width:100%; }
Or, You can do it via media queries.
#media only screen and (max-width: 480px) {
.modal .modal-dialog {
position:relative;
width:auto;
margin: 10px;
}
}
Related
The mobile nav icon disappears just fine to reveal the desktop nav when I expand the window, but the mobileNavSections div doesn't disappear when it's greater than the specfied screen width. The toggling function works as intended.
function displayMobileNav(){
var x = document.getElementById("mobileNavSections");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobileNav {
display: none;
}
#mobileNavSections {
display: none;
background-color: white;
position: fixed;
z-index: 1;
margin-top: 60px;
width:100%;
height: flex;
}
#mobileNavSections a {
display:block;
color: black;
margin: 5%;
text-decoration: none;
font-size: 17px;
opacity:0.5;
}
#mobileNavSections a:hover {
opacity: 1;
}
#media only screen
and (max-width: 768px){
.mobileNav{
display: block;
}
.mobileNav img {
height: 30px;
}
.mobileNav:hover {
cursor: grab;
}
}
<nav>
<div class="mobileNav" onclick="displayMobileNav()">
<img src="images/menuicon.svg">
</div>
</nav>
<div id="mobileNavSections">
About
Contact
中文
</div>
Adding this css media query should finish hiding the nav part that you are not covering with the JS
#media screen and (min-width: 769px){
#mobileNavSections{
display:none;
}
}
I would definitely recommend more of a mobile first when putting together the css. Media queries and overrides can quickly become a headache. Here are some tips and further reading:
Mobile first CSS is written like this:
Styles for mobile and styles that are common to all screen sizes
(no media query)
[icon name=icon-arrow-down]
Media query with a smallish min-width breakpoint
e.g. #media (min-width: 400px)
[icon name=icon-arrow-down]
Media query with a slightly larger min-width breakpoint
e.g. #media (min-width: 600px)
[icon name=icon-arrow-down]
Media query with a larger still min-width breakpoint
e.g. #media (min-width: 960px)
One way to think of it is that you start with a mobile base and build up (or out, if you think in terms of widths).
https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/
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 a clickable javascript link (Trustwave) on my desktop website theme which I'm trying to disable on mobile screens:
In footer.tpl:
<div style="position:absolute; margin-left:100px; margin-top:50px">
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=invert"></script>
I now know how to remove a clickable image link on mobile screens (Remove image link in mobile screen) for example:
In footer.tpl:
<div class="column">
In stylesheet.tpl:
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
}
but I've no idea how to re-create the javascript link so that it does not display on mobile screens. Thanks in advance!
You can use the media queries properly by putting the media query on the end as max-width is most probably getting confused of the context
`
Here is an easier way.
#media all and (max-width: 1500px) {
.hide {
display: block;
}}
#media all and (max-width: 480px) {
.hide {
display: none;
}}
OR
You can use window.innerwidth() to detect the width of the viewport and store it in a variable say x
And then use
var m = document.getElementById("column")
If (x>800)
{m.style.display='block'}
else
m.style.display="none"
I have a div that is 700px high, under that div is a 200px picture. I want to allow scrolling for the first 700px but then no more. So on smaller vertical resolutions users can scroll to see the first 700px but then the rest is "cut off".
On the other hand users on large vertical resolutions will see the 700px div and the picture all with no scrollbar.
How can it be done?
You can use css media queries to use different css on different window size.
#media all and (min-width: 350px) and (min-height: 950px) {
// css for a window size of 250px height and 750px width or higher
}
So you want to do something like this?
.content {
height: 700px;
width: 300px;
}
.main {
height: 700px;
width: 100%;
background-color: red;
}
.pic {
display: none;
height: 200px;
width: 100%;
background-color: blue;
}
#media all and (min-height: 950px) {
.content {
height: 900px;
}
.pic {
display: block;
}
}