This is my first question and I'm having real difficulties sorting this problem. Basically I have created a gallery using ul and li to make it responsive. The gallery can be found here:
http://www.radiologycafe.com/radiology-trainees/normal-variants
The issue I'm having is that if the text underneath the image is too long, it pushes the image directly below to the right of the page.
How can I keep the images in a line whilst keeping the page responsive and avoiding the use of white-space:nowrap which causes the text to overlap with other text?!
Can anyone help me!?
Screenshot of the problem. I have drawn on (using amazing photoshop skills) how I want it to look
Solution 1 (hide excess content to keep equal heights)
You can avoid this behavior by not allowing your <h5>s in your <li>s to wrap, using the CSS below. I also applied this rule to the descriptions (<p>s), in case you might add elements with longer descriptions in the future:
.nvgallery li h5, .nvgallery li p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
jsFiddle
(Note: I didn't add all the CSS from your website, only the relevant parts for this issue).
If you want to display inline-block elements as grid, the condition is that all elements are equal in height. If one element is higher than the following ones, it will create a small floating point (a corner) where the browser will start a new (shorter) row.
Solution 2 (allow unequal heights)
Flexbox.
.nvgallery ul.row {
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
jsFiddle
Now you can have li's of unequal heights and they will all play nicely.
This is happening because your list items have variable height. A quick fix would be to set a height of about 210px on each which should cover the added height from wrapped text:
.nvgallery ul li {
height: 210px;
}
Test and adjust as needed.
The other fix, which is evidently necessary at first glance, is that your floats aren't clearing properly so that in some viewports the H3 tags end up appearing as though in-line with your images (which are floating to the left of the headlines).
If you set a rule to clear:both on H3, this problem is cleared up as well:
h3 {
clear: left;
}
You will likely want to edit your code so that it does not include { float: left; } on the li elements. Instead, try setting the li elements as inline blocks with { display: inline-block; }. You'll need to adjust the alignment of the li items a bit, but this should solve your issue.
An answer with JSFiddle sample code is available at: https://stackoverflow.com/a/11812316/5953701
Related
I am looking for a flexbox solution to a problem that I have seen partial but not complete solutions. I have a field that can have a lot of text, so I want to show an ellipsis if it gets beyond a certain size. However it can also be quite short, and so in those cases I want the field to the right of it to next to it. I can do one or the other, but can't figure out how to do both.
Here's an example which shows how to use minWidth to get the ellipsis to show:
https://codepen.io/chriscoyier/pen/zqedEr
Note that there are 3 examples; it is example #3 with class .long-and-truncated-with-child-corrected which needs to be updated to resolve this issue.
It is works great when the screen shrinks:
But when it grows, there is too much space to the right of the text:
In this example, I would like the green dots to be immediately to the right of the "thank you" text. Thank you.
Remove flex grow in .long-and-truncated
.long-and-truncated {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
If you want space after the text, add column-gap on .flex-parent
.flex-parent {
display: flex;
align-items: center;
padding: 10px;
margin: 30px 0;
column-gap: 10px;
}
Edit:
Consider the following:
Consider this to be a full, 1920px screen. The div wrapping the texts and buttons seen in A is a flexbox.
When I resize the screen, the text and buttons squeeze as much as possible - as seen in B.
Eventually, when there's no more space to squeeze, it collapses into C.
Now, I've added a breakpoint so that C comes to effect at 1024px, meaning that the texts and buttons will have some padding between them so to never get glued together. For this, I added a padding: 0 50px;.
I was wondering if this - adding the padding - is the best, most efficient way of implementing this collapse given that I'm working with flexboxes.
Should this be done in a different, more appropriate way?
class {
display: flex;
flex-direction: row;
word-wrap: normal;
text-align: center;
justify-content: space-between;
height: 100%;
}
#include breakpoint-max(1068px) {
padding: 0 50px;
}
}
Thank you!
Try to add flex-wrap:wrap;. By default it is no-wrap. That's why elements squeezing. You can read more here https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have a bunch of .col-xs-3 and .col-xs-9 columns that should fit perfectly inline. They do on the desktop, even with media queries as narrow as 300px and below, but when I view the page on an actual mobile device (including the latest iPhone models), the columns wrap.
You can see my page here: https://affordable-healthcare-plans.org/p/signup-4.php
How it looks on desktops at small media queries (correct)
How it actually looks on mobile (incorrect)
What I've tried so far
I've started on a workaround where I disable flex-wrap: wrap on the rows but that really shouldn't be necessary since the bootstrap sizes should be an exact match.
EDIT
I could link to the source but my issue is mainly that I'm using bootstrap with some custom CSS and I don't know where the issue is coming from. Looks fine for me on older models.
Some of my snippets:
.form-contain .col-md-6 .row {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.row > label {
text-align: right;
white-space: nowrap;
position: relative;
left: -15px;
display: flex;
justify-content: flex-end;
}
Adding white-space: nowrap doesn't bring the labels and fields inline either and that almost always works.
Issue resolved! Bootstrap was placing a 0x0 px display: table pseudo-element via ::before inside each row, and somehow although it should have no size, it was causing the columns to wrap. Forced that pseudo to display: none within my form and now everything displays properly.
Please view what I am looking to do: codepen.io/samiralley/pen/xvFdc
How can I get the nav bar dropdown to show in columns?
Hover over 'Hard Goods' you will see many sections, e.g 'Ashes Caskets' and 'Wood Products'. I want each section to sit next to each other and when it gets to 5 in a row to go onto a new row.
I understand the width would be setting it to 20% which would allow 5 to make the 100%.
For some reason, I can not get it working.
There is a lot of CSS classes so I thought it would be easier to just use Chrome's inspect element?
Thanks,
Danny
This is not exactly what you asked but is quite similar. This shows a number of menu based on available space (height and width) with an overflow. Try to replace the following class in this way (be sure that all the rules will be applied, add !important if necessary). Maybe is not what you desire but could be a starting point.
.site-nav--has-grandchildren {
display: flex;
flex-wrap: wrap;
align-items: end;
position: fixed;
max-width: 90%;
max-height: 80%;
overflow: auto;
min-width: unset;
}
I'm more of a designer than a coder, so apologies if this question seems bone-headed and the answer obvious.
Anyway, with that caveat out of the way... I'm trying to create a page where the images are in a row that extend off the right edge of the screen, so that the user can scroll to see more images. Other interface elements like the logo and nav are fixed in place.
You can see the page here: http://werewolf.phantomlimb.net/
and the CSS here: http://werewolf.phantomlimb.net/wolf.css
To remove the spaces between the images I have floated them left.
My question is that in order to prevent the images from wrapping, even with a height attribute on the container div and display: block I have to give the div a width value, in this case 4000px. A width of auto for example makes the images wrap onto a new line, which is what I don't want!
As I may not always know the exact width of the combined images, is there a width value I can use that will force the images to stay in a single row, or some other CSS trick?
Many thanks.
J
I would use inline-block for this kind of stuff.
Something like this:
#imgHolder{
font-size: 0px; /* Remove the spaces between the images */
white-space: nowrap; /* Prevent the images from wrapping */
}
#imgHolder img{
display: inline-block;
vertical-align: top;
height: 654px;
width: auto;
}
Here's a working example:
http://jsfiddle.net/155ukfwp/