I am new to bootstrap and web stuff in general. I am having trouble with an application I am developing. What I would like is to have a top bar with buttons that do things and below that a setup where 20% left is filled with a div and the other 80% is filled with a map.
I can get the split using col-md-2 and col-md-10 just fine but the map does not extend to 100% height (I would say it sits about 75%. I have tried many different things offered up here and other places to solve the 100% height but nothing seems to work.
I have put together this in way of an example of what I am currently trying. I stripped away most of the css as none of it was working for me.
http://www.bootply.com/0xx9zBH3Ke
if you can offer assistance I would appreciate it.
**edit
I realized my bootply didnt illustrate my problem very well so I tossed the file at the link below to better show whats going on.
http://ec2-54-186-204-72.us-west-2.compute.amazonaws.com/demo2/bootysample.html
I have tried a couple of solutions but it still fights me by miss aligning things (mostly by placing the leftpane as its own row)
Try adding a 100% height to the html or body elemement. Then wrap your 20-80% width divs in a wrapper div and also set that to 100% height.
here is your solution
Bootply
#row {
display: table;
}
#leftpane, #map {
float: none;
display: table-cell;
vertical-align: top;
}
Maybe you can use like this
.center-element{
min-height: 100%;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
Only problem is IE :(
Related
Guys I cannot for the life of me figure out how to vertically align the images in this section.
See the Divi builder screen shot here
I've aligned them with an aspect ratio that would make them the same height but unfortunately the 20px padding in between the right images is making them protrude.
This is happening on all of my sections!
The uneven images
Please help!! I cant find a solution that works anywhere! :/
Website URL: www.tessa-jane.com
Use align-items: flex-end; on flexbox.
#media (min-width: 981px)
.et_pb_row.et_pb_equal_columns, .et_pb_row_inner.et_pb_equal_columns, .et_pb_section.et_pb_equal_columns>.et_pb_row {
display: -ms-flexbox;
display: flex;
direction: ltr;
align-items: flex-end;
}
But keep in mind the main issue is the height of the image needs to be increased. When you align the bottom (the problem in the picture) the top becomes offset. I would suggest increasing the height of the image also. But this at least fixes the bottom portion.
I just review your website you have to add height: 100% in few elements. There are 2 options to resolve your issue.
Option 1: Add Height 100% Class or Inline CSS in below mentioned elements.
Option: 2 Add below CSS in style.css file.
.et_pb_image {
height: 100%;
}
.et_pb_image_wrap {
height: 100%;
}
.et_pb_image_wrap img {
height: 100%;
}
I hope it'll resolve your issue, Thank You
I'm trying to push the footer, inside a flex, to page end. I'm using margin-top: auto to accomplish the same, but it doesn't work. I also tried align-self and align-items, they don't work as well. I also looked at all the SOs. What am I missing?
Codepen for my problem: https://codepen.io/vivekest/pen/XWmvyKq
Thanks in advance!
You need to set height on #all-content
#all-content{
...
height: 100vh;
}
another approach is to set justify-content property on #all-content and remove margin-top from #page-footer
#all-content{
...
justify-content: space-between;
height: 100vh;
}
#page-footer{
width: 100%;
}
the problem is that there is nothing between the footer and the all-content and hence the page-footer was not going down, so the usual way is to make a div block and set it's height to 100vh and it will be useful when you want to add more content between these two or
you can set margin-top:100vh that will bring the page-footer block down.
and yes stating the height is also a great method.
So I am vertically aligning content to middle with ghost element method:
html {height: 100% } body {min-width: 100% }
.block {
text-align: center;
height: 600px;
}
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.centered {
display: inline-block;
vertical-align: middle;
}
It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.
When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.
So any other methods or solutions that work good are appreciated!
Also IE8 support would be also nice.
Update: https://jsfiddle.net/duthzvyo/
Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.
If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.
See some tutorials on flex-box.
Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.
Also check out the following, based on Cassowary Constraint Solvers:
https://gridstylesheets.org/
https://github.com/IjzerenHein/autolayout.js
These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.
I'd recommend checking those tools out. :)
I am creating a horizontal scrolling site that will dynamically resize itself when i add the javascript to it later. However i started setting up the HTML and the code seems to cause a issue when i put another div inside of the div that makes up my dynamic code.
Also, would someone with more experience like to explain the drawbacks of using such a code if there are any?
#main_cont {
height : 500px;
white-space : nowrap;
overflow-x: scroll;
width: auto;
}
.ads {
display : inline-block;
height : 100%;
}
Is there a way for me to adjust the code below so that i can put divs and potentially images inside of it. I don't want to use a Javascript fix for this. thank you in advance.
http://jsfiddle.net/YVyFA/
You're just missing vertical-align: top; for your panels
.wlds {
vertical-align: top;
}
Updated fiddle
Also you don't need javascript to resize your layout, use a fluid layout by setting height and width in percentage values
I found a link that might be able to explain how to make a website that requires horizontal scrolling. Try this tutorial by CSS-Tricks. Hope this helped. Have a good day.
Well, the quickest and dirtiest solution to this is to give the #main-cont div a specific width and make the .wlds divs floated. So add the following CSS rules:
#main-cont {
width: 783px;
}
.wlds {
float: left;
}
JSFiddle.
I've been reading various posts on stackoverflow and a few other sites about centering images. I found this code on various sites that seems to be a general guide:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
I am trying to center an image. I can't center it with this code. I can make it move using text-align: center but read this isn't the best method of doing so. I made a jsfiddle. If anyone wouldn't mind helping me it would be appreciated. I was able to make the image move as well by adding a random width value. I don't think this is the right approach though either since I am eyeballing if it is centered or not.
Sorry, I couldn't get the actual image to display but the img logo is there as a placeholder: jsFiddle
Your code should work just fine. There's probably something more you're not showing us. Here's a demo of two methods, though.
Basically, if the img is display: block; you can use margin: 0 auto.
If it's display: inline (the default for an img tag) the parent element would need text-align: center; on it.
Here's some code to summarize: http://jsbin.com/upuzav/1/edit
I would assign your image a class rather that trying to center all images with html. This way if you want to change where its positioned, you can quickly, rather that adjusting all things with the img tag.
CSS:
.center_image {
display: block;
margin-left: auto;
margin-right: auto }
Your Image:
<img src="your_image.jpg" class="center_image">
In order for this trick to work the image must have an explicit width. See http://designshack.net/articles/css/how-to-center-anything-with-css/