container-fluid in Bootstrap 3.4 not stretching horizontally 100% - javascript

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

Related

Space between in desktop, stacked on mobile how to?

At the moment I'm using flex with justify-content: center; and padding left on B component. Is a temporary hack. How can I do it to work properly?
When the container is big, I want them centred but with a space in the middle. When is small, I would like to have them to go on top of each other.
Note:
On the large screen the 2 items are centred and have a gap between.
Should not be based on the screen size because the wrapper can be small on a desktop for example.
No JS solution like component media query;
One of the solutions could be something like this: https://www.npmjs.com/package/react-element-query but uses JS.
Media query doesn't work because https://jsfiddle.net/t4j6z7og/
Why not simply make use of a media query to swap to flex-direction: column at the smaller width, and swap the margin for B from margin-left to margin-top?
This can be seen in the following example
(hit 'Run code snippet' then 'Full page' for the side-by-side view):
.container {
display: flex;
justify-content: center;
align-items: center;
}
.a, .b {
width: 300px;
height: 100px;
border: 1px solid black;
}
.b {
margin-left: 20px;
}
#media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
.b {
margin-left: 0;
margin-top: 20px;
}
}
<div class="container">
<div class="a">A</div>
<div class="b">B</div>
</div>
Hope this helps! :)

Remove javascript link in mobile screen

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"

Modal window not taking full 100 width

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?

Fluid Dynamic CSS - Javascript/jQuery

I am wondering if there is way, to mark a MAX and a MIN value depending on the max Width of the browser window and min Width of the browser window, and have it dynamically change that MAX and MIN value between that set range?
Example:
I have a button "button" outside a div "divA" (it is part of another div "divB", that lies outside the div being discussed), and I want this button "button" to lie at the bottom right corner of this initial div "divA".
Now, I can get the button to lie at the bottom right corner when the browser window is at is absolute minimum, and at the absolute maximum, but the in between is a bit sporadic since I'm positioning the button absolutely, and then changing the bottom percentage on the two media widths.
Is there a a known javascript or jquery that would allow me to do this?
example CSS:
#divA{
width: 100%;
height:auto;
}
#divB{
width: 100%;
height: auto;
}
#button{
position: relative;
}
#media screen and (min-width: 768px){
#button{
position: absolute;
bottom: 100%;
}
}
#media screen and (min-width: 400px){
#button{
position: absolute;
bottom: 250%;
}
}
example HTML:
<div id="divA"></div>
<div id="divB"><button>CLICK ME</button></div>
demo -http://jsfiddle.net/ogjhef7c/1/
you are setting bottom to by 250% 100% try changing the value, #media works find try resizing theattached fiddleheight`
#media screen and (max-height: 300px) {
#button {
bottom: 0px;
background: red;
}
}
#media screen and (max-height: 100px) {
#button {
bottom: 0px;
background: green;
}
}

Allow a div to scroll for x amount but then stop?

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;
}
}

Categories

Resources