I'm currently making a simple landing page with Bootstrap. My Jumbotron is set to 100VH.
When testing yesterday I noticed the content inside of my Jumbotron breaks when the browser is zoomed in beyond 100%.
Example of what is happening here(Zoom IN): https://jsfiddle.net/y8dnbz3t/
The Code:
CSS
*{margin: 0;}
.jumbotron {position: relative;
width: 100%;
height: 100vh;
background-color: lightblue;
text-align: center;}
/* Div that breaks */
.box {
position: relative;
display: block;
height: 250px;
width: 50%;
background-color: black;
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
/* Content after 100VH */
.after {
text-align: center;
padding: 10px;
}
What I tried:
I attempted setting the height of the 'Box' to auto. Didn't help.
I do not anticipate that many people zoom in or out.. but this is part of the development process and a bug I'd like to know how to fix.. and what causes it.
How I somewhat Solved it:
I simply changed the height of the Jumbotron from
'height: 100vh'
to
'min-height: 100vh;'
It does not keep the box element at the middle of the div as it should. But, it does solve the simple breaking issue that was occurring before.
I will try and add some transform:translate properties and see if I can get it to center properly this way.
try changing .box class height to 50%
.box {
position: relative;
display: block;
height: 50%;
width: 50%;
background-color: black;
color: white;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
Related
I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.
.img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
}
Not use flex. Use this CSS:
div {
text-align: center;
}
Don't use flex. just use this on your div
div {
text-align: center
}
Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer
img-star {
border: 1px solid white;
padding: 20px;
margin: 30px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
set img display to block and set left + right margins to auto, e.g.
.img-star {
margin: 30px auto;
display: block;
padding: 20px;
border: 1px solid white;
border-radius: 50%;
width: 45px;
height: 45px;
}
You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.
I experienced a problem with placing divs. The divs "menu" and "content" are meant to be next to each other. They were, until i tried to set their width using % instead of px. After applying that change the effect of 'float: left;' was cancelled. I tried changing the order of parameters in css file, but it didn't work. I want them to maintain the 20/80 ratio, while still being next to each other. Can i achieve that using this method, or am i missing some information, and these can't be used on the same div?
#menu {
background-color: lightgray;
width: 20%;
min-height: 600px;
padding: 10px;
text-align: center;
float: left;
}
#content {
background-color: gray;
width: 80%;
min-height: 600px;
padding: 10px;
float: left;
}
<div id="menu">
menu
</div>
<div id="content">
content
</div>
Seems like your padding is breaking the line because you are filling the 100% of the space.
See https://jsfiddle.net/6dfs27u8/1/
#menu{
float: left;
background-color: lightgray;
width: 20%;
text-align: center;
height: 600px;
}
#content
{
float: right;
background-color: gray;
width: 80%;
height: 600px;
}
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.
Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
You have two very simple ways to do that.
If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.
In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.
The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content
Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/
Snippet:
footer {
background-color: #000; opacity: 0.7;
height: 200px;
display: flex;
justify-content: space-around; /* this is important */
align-items: center; text-align: center;
}
footer > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>
If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.
The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.
Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/
Snippet:
#footer {
background-color: #000; opacity: 0.7;
width: 100%; height: 200px;
display: table; /* this is important */
}
#footer > div {
display: table-cell; /* this is important */
text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<div id="footer">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div>
//HTML BLOCK
<div id="footer">
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div>
//CSS BLOCK
#footer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items:center;
width: 100%;
background: black;
opacity: 0.7;
height: 200px;
}
.fbox {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
margin: 0 auto;
border: 5px outset #ea2f2f;
}
Alternative to flex box if you can't use that for compatibility reasons:
The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 ->
20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:
Using float:
You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
float:left;
margin-left:20%;
margin-right:-88px;
position:relative;
left:-88px;
top:45px;
}
This way feels a little fragile to me, but I can't immediately see why...
Using absolute positioning:
You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: absolute;
top:45px;
}
#fbox1 {
left: 20%;
margin-left: -88px;
}
#fbox2 {
left: 40%;
margin-left: -66px;
}
#fbox3 {
left: 60%;
margin-left: -44px;
}
#fbox4 {
left: 80%;
margin-left: -22px;
}
You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?
Hope this helps!
EDIT:
Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
I have a fixed element locked to the bottom of the page spanning the full width of the window. There are two floating elements (they are clearfixed in the actual code, but not in the fiddle) within this element. The rightmost element is of fixed width and the leftmost element's width is determined by a css calc. The leftmost element's child is significantly wider than it, but it is not causing an overflow scrollbar to appear.
Fiddle: http://jsfiddle.net/hMgR5/3/
Now, one possible solution would be to forgo the native browser support for scrolling and add my own scrolling buttons on both sides of the viewing element, but I would prefer using the browser's native support of scrolling if possible unless user experience with it done this way has been poor.
EDIT: The problem is that the child elements have the same height as the fixed position element. Because of this, the scrollbar is being rendered beneath the fixed element, preventing the user from interacting with it. A more savvy solution may be necessary: possibly doing away with floats and moving to absolute positioning with padding on the end of the overflowing element may work better.
Markup:
<div class="bottom-bar">
<div class="viewer">
<ul class="list">
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
<li class="element">Hello</li>
<li class="element">World</li>
</ul>
</div>
<div class="other-bar-item">
Other Item
</div>
Styles:
*{
box-sizing: border-box;
font-size: 1em;
font-weight: bold;
color: white;
}
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
}
.other-bar-item{
float: left;
width: 200px;
text-align: center;
}
.viewer{
float: left;
width: calc(100% - 200px);
overflow-x: auto;
}
.list{
margin: 0;
padding: 0;
width: 2000px;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}
here is the link: jsfiddle
you don't have to set a high width for your ul,
you can set white-space: nowrap; to parent element and set inline-block display for its children. this would force parent to be as wide as needed.
and you don't need to set overflow:auto; for parent cause it does that automatically.
and here is the code:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
height: 40px;
background: #1a1a1a;
overflow-y: hidden;
white-space: nowrap;
}
.other-bar-item{
display: inline-block;
width: 200px;
text-align: center;
background-color: red;
}
.viewer{
display: inline-block;
}
.list{
margin: 0;
padding: 0;
height: 40px;
}
.element{
list-style: none;
display: inline-block;
width: 200px;
height: 100%;
position: relative;
background-color: navy;
border-right: 2px solid white;
text-align: center;
}
On my mac the scroll bar seems to show up on it's own, not sure why PC was different but, to have the horizontal scroll bar show up (but not a vertical), add the following to the viewer class:
overflow-y: hidden;
height: 100%;