I am doing a products page using Bootstrap and most of the images appear fine, but the last line on the two bottom rows checker in a smaller screen size.
To let you know what I mean I've included an image here.
Here is the code of one of the rows that are not working right:
<div class= "row">
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_1.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_2.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_3.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_4.jpg">
</div>
</div>
This usually happens when you have some padding or border that is increasing the size of the element.
Grids work on the basis of % so if you have 2 elements that width each equal 50% but then you add something like some padding or a border you are going over a total of 100% and the element is pushed to the next line.
My advice (given I don't have the actual code) would be to review your styles using the browser dev tools to see what styles are being applied when this happens. You should be able to track down the offending property.
Hope this is useful even if not a definitive answer.
So I eventually fixed the problem by making the all the images the exact same size/dimensions (some were a few pixels off). Just thought I'd follow up on this.
Also I later discovered that if you have an extra line of text or two underneath the picture that might throw the pattern off.
Related
I've been looking here for the answer to this and I've seen a lot of questions, but nothing that addresses what I am trying to accomplish.
Essentially I am creating a location finder with a map on the right and a list on the left. Currently there are over 18,000 locations that can be searched so the list of locations on the left could be long and it doesn't make much sense to have the list extend beyond the size of the map on the right.
The layout I am looking for is similar to this:
To keep things responsive, I would like the height of the columns in the second row to be set with a percentage and not a pixel amount. I don't necessarily care much about the height of the map on the right, it's going to be sized using the responsive embedding that bootstrap has, and it works fine, but the problem I am having is getting the list on the left to overflow instead of just growing.
I've tried adding the various sizing classes to the column with overflow-auto. I've tried wrapping the contents of the column in another div and applying those classes. Nothing seems to work correctly.
The closest I got was getting the contents of the column to overflow and show the scrollbar, but the parent div still maintained the original height of the div so there was a huge amount of whitespace at the bottom under the row.
This whole thing is making me absolutely insane! I can't believe that something like this could be so difficult. The sizing classes examples seem to show what I'm looking for, but they aren't working in practice.
At the moment, this is what I have: https://codepen.io/zachattack05/pen/aeLmmv
--------------------------- UPDATE ---------------------------
After trying Zim's suggestion, the page is rendering the scrollbar correctly, but it appears to be much bigger than the 25% that's expected.
Here's a fullsize screenshot of the outcome and the row, despite having h-25 set, it appears to be 75% of the screen at least.
A better representation of what I am looking for might be something like this, but not to scale. The map area would be 25% of the height of the page. Essentially, the map area is sandwiched between some other rows. and then a footer at the bottom of the page. I don't want the map and the scrolling div to stretch all the way to the bottom of the screen, that's way too tall.
There have been other questions on this. Flexbox items are equal height and will always grow to the height of the tallest column. If you want to limit the height of one column, so that the other one scrolls, use an inner position:absolute element...
https://codeply.com/go/kYFBFBc28l
<div id="PanelLocationFinderContent" class="row flex-grow-1 position-relative">
<div id="locationlist" class="col-sm-4 overflow-auto bg-info">
<div class="position-absolute">
<p>text</p>
<p>text</p>
..
<p>text</p>
<p>text</p>
</div>
</div>
<div class="col-sm-8 bg-warning">
<div class="embed-responsive position-static">
<div class="embed-responsive-item embed-responsive-1by1 bg-secondary">
<div id="map" class="bg-success h-100">MAP CONTENT WILL BE HERE</div>
</div>
</div>
</div>
</div>
This isn't exactly a "problem" I'm trying to solve, just something I've noticed about bootstrap columns when I work with them.
It seems that bootstrap's "scaffolding" sizes "reset" somehow when I put a column inside a column.
For example:
Let's say I have a col-md-9, and I want two columns inside of it, which together span the entire width of the "parent" column.
I would have thought that I would set the width of the two columns at 4.5 (col-md-4.5), but when I do this, the two smaller columns behave as though they are nested inside a col-md-12... In other words, they fill up 3/4ths of the col-md-9, not 100%. If I give them the class of col-md-6, they will together span the whole width of their parent (col-md-9).
Here is a visual representation of what this would looks/behave like:
Again, this isn't really a 'problem' that I need solved per se, just something I was curious about because it seems to conflict with what I've read in a lot of bootstrap documentation.
First things first - there is no col-md-4.5 unless you've made your own custom CSS class for that. But perhaps you did something like col-md-4 and then a col-md-5 to add to a total of 9 and saw the results that you observed.
When I first started learning bootstrap I was baffled because I would do similar things with their grid system. If I had a col-md-9 then I expected that the children could never exceed 9. My elements were never positioned right. Then I learned how it really works.
Basically you can think of the children of an col-*-* as "resetting" themselves, or in other words they always will add up to 12 even if their parent is a col-xs-6 (or whatever else).
Here is a fiddle I have made.
The code for the fiddle is here:
<div class="container">
<div class="col-xs-12 red-outline">
<div class="col-xs-4 blue-outline">
col-xs-4
</div>
<div class="col-xs-5 blue-outline">
col-xs-5 for a total of 9
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
col-xs-6
</div>
<div class="col-xs-6 green-outline">
col-xs-6 for a total of 12
</div>
</div>
</div>
<div class="container padding">
<div class="col-xs-12 red-outline">
<div class="col-xs-6 green-outline">
<div class="col-xs-3 black-outline">
3
</div>
<div class="col-xs-3 black-outline">
3
</div>
</div>
<div class="col-xs-6 green-outline">
<div class="col-xs-6 black-outline">
6
</div>
<div class="col-xs-6 black-outline">
6
</div>
</div>
</div>
</div>
What you can see when you run this fiddle is the red top bar represents the parent col-xs-12. In the first example, the blue add's up to 9, and doesn't take up the full width.
You can see in my second example the green add's up to 12, and does take up the full width.
Now for the third example we have some serious inception stuff going on. We have a col-xs-12 and then the two green col-xs-6's and then on the left hand side we have two col-xs-3's which add up to 6 (and as you can see, they do not take up the full width). On the right hand side we have the two col-xs-6's inside of a col-xs-6 which is inside of a col-xs-12. It's a bit of a mind bender, but just understand that you should have everything add up to 12, and not add up to whatever width the parent is.
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I have two columns in Bootstrap 3, one with a couple of images in it, the other with one big image. I want one column - the one with multiple images - to be partially overlapped the other, so one image overlaps the three other images. If I try this the big image gets moved either down or up. Is the a way to overlap these columns? it is impossible to put both images in the same column, due to the rest of the page.
Code:
<div class="col-md-6 col-md-offset-3">
<div class="col-md-4 col-md-pull-2">
<!-- three images -->
</div>
<div class="col-md-6">
<!-- bit image -->
</div>
<div class="col-md-6">
<!-- other bit image -->
</div>
</div>
Can anyone help me?
The columns themselves will NEVER overlap on the same plane. They can be placed above each other, but only the top-most will occupy the given pixels.
You can however, overflow the images, so they expand outside the space provided. See: https://jsfiddle.net/q9dn808p/1/ [terrible images used]
The question isn't 100% clear, so fixing as per noted in the comments would be advised. The other properties to solve your solution is z-index, in association with position: fixed or position:absolute to mark your larger image to a certain side of the page.
You can make them overlay giving a margin value less than 0.
#left-picture{
margin-right: -50px;
}
https://jsfiddle.net/q9dn808p/2/
Is this what you are looking for?