How to maximize div width in browser screen in reactjs.
As you can see there's a small margin in left and right of the div container even I set the width to 100vw. And I use container fluid. How can I maximize the width of div container to fill the width of the browser screen
Make sure the margin of the body of the page is set to 0.
body {
margin: 0;
}
Also worth mentioning that Bootstrap's container and container-fluid have a small amount of horizontal margin on either side. You might want to override this.
Related
So I've been trying to create a simple page where the image takes up 100% of the height, with a small sidebar. I want the image to resize itself when I resize the window. When I resize the window vertically, the width stays the same, which is not what I want (I want it to retain it's aspect ratio whatever the window size). I really dislike this distortion, but am unsure of how to fix it. Any idea what I'm doing wrong?
.big-image {
max-height: 100%;
min-width: 20%;
margin: auto;
overflow: hidden;
}
set display: block or display: inline-block to your .big-image class, in order for the max-height and min-width property to work. These properties, along with height, width, min-height, max-width, padding-top, padding-bottom, margin-top and margin-bottom doesn't work on inline elements.
You can set either the height or width of an image to auto and control the other property with a set size whether that be percentage or px. That auto should maintain the aspect ratio of the image while you get to control the size of the image with the other property.
max-width:100% and height:auto will work. When applying max-width:1000%; it will take the width of the container and height will be proportionately varied.
I'm trying to make a div height the same width as a col-md-3 in bootstrap so that as the page adjusts it keeps its "squareness". Outside of bootstrap I use vw, but that's not the case here and height 100%; doesn't work. Any ideas?? Needs to be simple and dynamic.
Bootstrap make same height as width. Width of the colum is added to padding so that you can get a squared box
.col-md-3{width:25%; padding:25%;}
https://jsfiddle.net/SHABU89/gee3mzsy/
It has been answered before from what I see.
div {
background:orange;
width:?%;
padding-top:?%;
}
width = padding=top
See here css height same as width
I have a header/footer <div> that is 100% width. If I make the widows small enough so that horizontal scrollbar appears, and then scroll to the right most of the page, I can see the footer breaks at some point and leave an empty white space as if its width is fixed.
http://jsfiddle.net/enxRw/
Am I missing any CSS property? Do I need an extra wrapper <div>? Do I need JavaScript to check window width and adjust accordingly?
Edit:
The width:1024px for main <div> is on purpose because its content is 2 X 500px images side by side and I don't want them to wrap when windows is resized down.
Instead of having the width set on the .main div, set it on the body:
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
Yes you can go with a wrapper div. Or you can specify a min-width on the body element.
Percentage widths are calculated as a percentage of the parent node. In this instance that is the body node.
Since you have not set a width on the body node it is calculated to be the width of the viewport. (You can check that out by looking at the body node in an inspector)
I have a css code that has a float property. When i resize the window of my browser, the menus of my webpage are moving down. I already comment-out the float properties, but nothing's changed. What should I do to make it fixed that it will not move down even though I resize my browser?
float got nothing to do with the floating of the div's when the window is resized.
It just ask the div to be aligned to the left,right only if there is space,
what i think you should do is to make wrapper div ID called "content" like this below and add all your inside div elements there,
#content{
width:960px;
margin:0px auto;
}
now inside this div content, if you have 2 div's width 400px and 400px if you set their property to float left they align left, if you set it float right they align right..
if there is no space, like if one div is 400px and other one is 600px even if the property is set to float left they will come as vertical dives as combined width is more than container div
learn more about fix width css design
I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?