I have a unordered list of thumbnails that work on every other page except one. On this one particular page, there is a large amount of whitespace on the third row. See below:
I don't get why it is doing this, it happens even if you take away padding and margin. The page that this is doing this on is http://bransonweekend.net/cabins/trailsend
This is because you are using:
.picture-board .pinned-photo img {
max-height: 160px;
}
and in that row the first image form factor makes it go the max-height but the other two are too wide so the height is less than the max 160px.
try adding this:
.thumbnails>li{
min-height:172px;
}
this will make sure they are the same height even if they are too wide
Try out this library:
http://masonry.desandro.com/
It's useful in cases like these, where elements have to line up on a grid. Masonry is used all over the internet.
Related
I have tried everything within my repetoire to fix this. I fall on my knees with open hands!
You can view a draft of the page here:
www.barrettcv.com/draft_so.html
If you would like the gist of how the page should work, simply view it in Firefox (with browser window smaller than 992 and scroll down. The side panels start off attached, and then 'fix' to become static while the rest of the content moves. This is the correct behaviour
Main problem.
The problem arises in Chrome. When the menu column and the details column 'fix,' (scroll down the page a little) all digital hell breaks loose.
Secondary problem.
When the view window is about 1200px, the space between the menu column and the main content panel doubles up. This isn't as big a deal as the first problem (which has had me attempting to destroy my flat's retaining wall with my forehead) - but it's got me relatively flumoxed, as I'm sure there must be a more elegant solution that forcing it back into position with media queries
It looks like you are coming up against an issue in how the different browsers calculate the position of fixed position elements when no positional CSS properties are defined for the element e.g. top and left. From the spec:
...user agents are free to make a guess at its probable position.
For the purposes of calculating the static position, the containing
block of fixed positioned elements is the initial containing block
instead of the viewport...
I think the only way around this is to choose a different positioning scheme. You can remove the .col-md-pull-* and .col-md-push-* classes and reposition the Bootstrap columns by using absolute positioning (depending on media queries to arrange those columns how you want for different viewport sizes). In this case it appears all browsers honour the position of the fixed element.
.row {
position: relative;
}
/* apply to the details column */
.push-9 {
position: absolute;
left: 75%;
}
Example: http://bootply.com/92096
What you need to do is to fix both left and right column, starting from that you will have a much better way of controlling your divs (since you want them fixed as I can see).
So, sumarizing: you need to add position:fixed to both your left and right columns. Modify your left: x% and right: x% so that they match your criteria.
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
Why would the top two rows of my site load like this and the bottom row perfect?
Bottom Row:
HTML:
https://gist.github.com/1228291
CSS:
https://gist.github.com/1228301
It really depends on how you want to achieve vertical alignment. For instance, you could try something like:
.product-grid .name { height: 40px; }
But this would give you some whitespace between the title and price when the title is only one line.
It looks to me like it's off because the "cells" in the top row have item names that span two lines (thus pushing your buttons down for those items). With the "cells" on the bottom, the images above appear to make them wide enough that the item names fit, if this wasn't the case, that row would also suffer the same problem. You could try setting the names to have a specific height (as #brianreavis suggested) or perhaps adding non-breaking spaces ( ) instead of regular spaces) to the names would force the name div to push out the side.
On a side note, you don't have to use two ID's in a CSS selector (unless you're doing it for specificity reasons). Since the IDs are unique to the whole document, simply calling #welcome instead of #header #welcome should be sufficient.
Because your product titles have different number of lines.
Maybe this structure can inspire you:
http://jsfiddle.net/JeaffreyGilbert/EW6Ax/