Flexbox: elements collapsing - the best approach? - html

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/

Related

Divi - How to vertically align stacked images in columns, within in a section

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

How can I display a text field with an ellipsis into a flexbox that shrinks to fit?

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:

Responsive html and css using media queries

In my previous question I asked a similar question but was using the bootstrap framework. I want to be able to create a responsive page without using bootstrap because I don't really like the grid system.
I have two divs that are centered horizontally and vertically. I would like for it to be responsive and stack up on top of each other when the window is minimized. My code on CodePen. I've attempted it a few times and I still not sure how to approach it:
#media only screen and (max-width: 768px){
#about #aboutInfo{
border: solid;
float:none;
text-align: center;
width: 100%;
}
#about #aboutInfo{
float: none;
width: 100%;
}
}
I've already solved your problem in the previous post but ok. First of all, I advise you to stop using floats because floats are history and float: none; does nothing because by default elements don't float like you have it written in your codepen. Second, I recommend you to take a closer look at Flexbox and the possibilities it brings because it really shines when it comes to responsive web design/development.
So again, solve the problem by adding the below code to your media queries:
#about {
flex-direction: column;
}
And also like I told you before it's always good to use some basic CSS browser reset:
* {margin: 0; padding: 0; box-sizing: border-box}
If I understand you right, you should add
flex-flow: row wrap;
or
flex-wrap: wrap;
in #about.
The reason it's not stacking is because you're separating your content with div tags. Make the section a col and style them like here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
In bootstrap, there is a row tag that acts like a div tag. But each of the columns are litterally "col-**" with styling behind them.

How do I stop css pushing <li> to the right?

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

bootstrap div 100% height

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 :(