Hi all,
I was trying to implement mixing up of images functionality using jQuery mixitup. I tried but getting an issue for a particular image.
I have shared demo in the link below
Above,you can see that my 5th image (sec row ,sec column) is not aligned. However, if i add 6th image then 5th automatically gets aligned. Basically, what i see that if my images end on 2nd column, i get this error(only for the last image).
Please suggest.
Hi,
You are aligning those inline-block elements across the screen using text-align:justify and just like text the orphan elements on the last line won’t get justified unless there is enough of them.
You seem to have code in place as there are two elements called .gap which I am guessing are explicitly for this purpose of stretching the row. If you add the same width as your image to .gap the row will stretch.
e.g.
.gap{
display:inline-block;
width:284px!important;
}
thanks it does work. But few questions
You are aligning those inline-block elements across the screen using text-align:justify
how does text-align :justify even works.I mean left, right center etc is fine,but not sure about justify
just like text the orphan elements on the last line won’t get justified unless there is enough of them.
please help me understand above
Also, would like to know how did you even debug that 
, because i didn’t get any clue on it (i looked in the box model etc). Great find
Ever used Microsoft Word? Justify will place random spaces throughout hte line in an attempt to get the text spread from the left edge to the right edge
Yes as Ryan said its the equivalent of using text-align:justify on text. The algorithm works out if there is enough text to fill the line and then evenly spaces out each word across the available space.
If there are not enough words to fill the line (or the spaces are too large to make it fit) then the last line is left alone.
The text-align:justify trick on inline-block elements was originally discovered here in the forums in one of my old css quizzes many years ago so I was familiar with the technique.
The easiest way to debug when you are not sure what is happening is just go into webdeveloper tools and start turning things on and off and see what happens. If you turn off text-align:justify you will see that all the blocks move to be left aligned and so you can be sure the problem is related to that rule and then try and find a solution.
If that doesn’t work then make a reduced/ stripped down demo as things are often easier to spot when the codebase is small.
thanks Paul and Ryan
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.