I'm trying to make the following div flexible
div {
min-width: 500px;
max-width: 1000px;
width:100%;
height: 400px;
margin-left:100px
}
If I remove the margin left everything works fine, but with the margin, when I start resizing the browser window, the box goes behind the browser window and only then starts being resized. How do I solve this issue? I tried a wrapper, tried resetting box-sizing, tried with different positionings but nothing seems to work, what am I missing?
Try adding width: calc(100vw-100px); or calc(100% - 100px). This sets the width of the div to Veiwport width - Margin
Also remove max-width: 1000px; and min-width: 500px;
div {
width: calc(100%-100px);
height: 400px;
margin-left:100px
}
div {
width: calc(100%-100px); /*or `width: calc(100vw-100px);`*/
height: 400px;
margin-left:100px;
background-color:pink;
}
<div></div>
Related
How could create a div sticky in the dojotoolkit?
Some scroll function?
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-geometry/position.html#dojo-dom-geometry-position
You could indeed create an event handler to the scroll event and continuously reposition the div, or you simply use CSS and add position: fixed to the div.
For example:
body {
min-height: 9000px;
}
.box {
position: fixed;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background: yellow;
}
<div class="box">Even when you scroll this box stays centered</div>
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
Currently, I am using width: 100% to make my image scale with the window size.
I would like to know how I can make the image scale down and not become distorted.
I simply changed the image width too width: 100% and changed height to height:auto to fix this for anyone that might need to know.
eg.
img {
width: 100%;
height:auto;
}
EDIT:
To ensure image widths don't go larger than their containers
img {
max-width: 100%;
width: 100%;
height:auto;
}
I did this and it worked out for me. I did not want the big slider on the homepage so i resized it, then i found out it was not responsive anymore. I added some codes and tested it, some did not work, some did. Finally this is the code to and resize the slider, and keep it responsive!!
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
display: block;
max-width: 100%; height: auto; margin: - auto;
}
}
Have seen that this piece of code could solve my problems but I don't know how or where to apply it to make it work correctly
JScrollPane.setVerticalScrollBarPolicy(VERTICAL_SCROLLBAR_NEVER);
If your aim is to hide the vertical scroll bar then use the following CSS property...
overflow-y: hidden;
In your CSS (RRD.css), you have...
.scroll-pane
{
width: 100%;
height: 670px;
overflow: hidden;
}
Try changing it to...
.scroll-pane
{
width: 100%;
height: 670px;
overflow-y: hidden;
}
More changes
And in your includes/jquery.jscrollpane.css change...
.jspPane
{
position: absolute;
width: 9660px;
}
to...
.jspPane
{
position: absolute;
width: 5880px;
}
This will remove the extended scrolling that is happening. And make sure your content-holder width is 5880px to match the jspPane scrolling ...
<div id="content-holder" style="width:5880px;">
The vertical scrollbar will not appear as long the content-holder div width is not less than the width of the content inside it. Think all your images in the content-holder div adds up to 5680px + you need to add the padding you apply as well.
I'm making a slideshow of images with the class display. I want to limit the height and width of the image to a maximum of 80% of the window's, so that there won't be a need for a scroll bar at any normal size. Here's the CSS I used:
.display {
max-width: 80%;
max-height: 80%;
}
It works exactly how I want it to work in Chrome and Safari, and Firefox acknowledges the max-width as well. But Firefox ignores the max-height, so large vertical images go off screen.
Thanks very much for any help.
You need to tell the browser about html height and body height. Then it calculates the height based on those sizes. The following works fine on all bowers.
html { height: 100%; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.display {
max-width: 80%;
max-height: 80%;
overflow: hidden;
}
There's a working example here: http://jsfiddle.net/P7wfm/
If you don't want image to crop if they exceed the 80% height or width set img height to
.display img {
min-height: 100%;
min-width: 100%;
}
I agree with #Uds, you will need to specify the height and width of the body and html element
Other thing to keep in mind:
Moreover you will also need to define the browser in CSS code, you can define it by follow:
.display{
/* For general browser */
max-width: 80%;
max-height: 80%;
/* For Firefox browser */
-moz-width: 80%;
-moz-height:80%;
/* For Chrome and Safari browser */
-webkit-width: 80%;
-webkit-height:80%;
/* For Opera browser */
-o-width: 80%;
-o-height:80%;
}
This will specify that which browser should have what kind of height or width.
You need to set height for container element or to body:
body {
height:100%;
min-height:100%;
}
Tried the proposed solutions without success, on Firefox 62.0, max-height animation is ignored.
There is also a delay when the max-height property is changed matching the duration of the animation.
I had the same problem today but with the nice twist that I could not set all parental elements to a height of 100%.
I found a clue to another solution to this problem here:
https://developer.mozilla.org/en-US/docs/Web/CSS/max-height
You can assign not only % to max-height, but also "em", so if you set your html and body to a font-size of 100% this works similiar to a percental width.
<div>
<p>
<img src="" alt="">
</p>
</div>
html,body{
font-size: 100%;
}
img{
max-width: 100%;
max-height: 50em;
}
DEMO
Changing max-heigth to 80vh worked for me.