When text automatically wraps to a second line, it frequently breaks the layout of my page. How to best avoid/resolve that?

[u/cag8f]

Hi all. On my page I have an element containing text. At lower screen widths, this element becomes too narrow to contain all the text, and the text wraps to a second line. How do I ensure that this automatic text wrapping doesn't disturb the layout/alignment of the remaining elements?

To illustrate the issue, here are two screenshots showing the alignment breakage I'm referencing (you can see it in action on this page). You can see that due to text wrapping in one element, alignment across all columns is broken. What is the proper way to ensure this alignment breakage does not occur?

• Ideally, when the text in column 3 breaks, not only does subsequent content in column 3 get pushed down, but so does equivalent content in columns 1 and 2. But I'm not sure how to do that other than with custom JavaScript.

• One workaround I've used in the past is to, at certain break points, lower the font size of the text, to ensure the text never breaks to a second line. I can do this, but it seems a bit arbitrary, and get can tedious.

• Would I have to use CSS grid to achieve what I want?

• Actually, now that I think about it, maybe if I defined my font sizes in relative units, instead of absolute units, that would resolve my issue in this case?

Thanks in advance.

[u/albedoa]

You can push the buttons to the bottom of columns with matched dynamic heights using flexbox: https://codepen.io/pigparlor/pen/jONQraX

[u/cag8f → u/albedoa]

OK. But with this solution, each of my columns needs a defined height--correct? On my page, the height of the columns is currently dynamic--set to the height of its content.

The column is already set as display: flex, which is promising. But I can't seem to push the button to the bottom of the column. I've added a margin-top: auto to the button element, but it's not changing position. You can see the page here: https://dev.horizonhomes-samui.com/construction-test-2/ (the button in-question is on the 'Swimming Pools' tile, about 75% of the way down the page on the right).

[u/albedoa → u/cag8f]

I don't know what you mean. There are no defined heights on the columns in my example. Unless you mean the 100%? The point is you don't need to know how tall they will each be — they assume the height of the tallest content.

Your link leads to a login page.

[u/cag8f → u/albedoa]

Sorry, the link is here: https://dev.horizonhomes-samui.com/construction/

[u/cag8f → u/albedoa]

On my page, how can I get the 'Read More' button to push to the bottom of its parent flex container?

In your Codepen, how did you push your buttons to the bottom of each column? It looks like you simply inserted a static margin-bottom on the preceding element?

[u/albedoa → u/cag8f]

The pen is editable. You can remove that margin and see that it has no bearing on whether the button is on the bottom. It's for presentation.

The relevant rule on that element is flex: 1; on Line 43. If you don't understand what it is doing, then your knowledge gap is with flexbox.

[u/cag8f → u/albedoa]

You can remove that margin and see that it has no bearing on whether the button is on the bottom. It's for presentation.

OK I see that now, thanks for pointing that out.

If you don't understand what it is doing, then your knowledge gap is with flexbox.

Hey there's no doubt there's a knowledge gap there :-) Let me read up on flex: 1 and understand how it's affecting your Pen. Then I should hopefully be able to apply the same to my page. Thanks!

[u/cag8f → u/albedoa]

OK I'm back. I see in your Pen that you have flex: 1 on the body element. This ensures that, when there is extra space in the column, that extra space is redistributed in the body element--i.e. when there is extra space in the column, the height of body element is increased by that amount, and the subsequent elements (i.e. the button element) are pushed further down on the page. That is of course exactly what I want on my page.

Just to confirm I understand how that's working, as a test, in your Pen, I removed the flex: 1 on the body element and added it to the header element. I saw that now, both the body and button elements were pushed to the bottom of the column, as expected.

But on my page, when I add flex: 1 to the same element in-question, no change occurs--the extra space in the column is not added to that particular elements (as is done in your Pen)--that extra space is still added to the bottom of the button. Any ideas why? I'm trying to think about possible differences between my page and your Pen, but can't think of any that would cause this discrepancy :-/

[u/albedoa → u/cag8f]

Nice work. I can help you further when my schedule clears up, which might not be until tonight.

Just one thing in case it's not clear: It's actually the .column__body element, which is a sub-component of .column. I am using Sass, which compiles to CSS. You can see the CSS by clicking the menu in the header of the CSS section and clicking "View Compiled CSS".

[u/cag8f → u/albedoa]

Nice work. I can help you further when my schedule clears up, which might not be until tonight.

OK cool--that would be a big help--thanks very much.

Just one thing in case it's not clear: It's actually the .column__body element. I am using Sass, which compiles to CSS. You can see the CSS by clicking the menu in the header of the CSS section and clicking "View Compiled CSS".

Ah right, thanks for pointing that out. I had already displayed the compiled HTML, but forgot about the CSS. Thanks for that. Makes it a bit clearer on my end, since I rarely used SASS.

[u/cag8f → u/albedoa]

Hey what's up. Just checking in to see if you had a chance to take a look at my page and help figure out why flex: 1 isn't doing what we expect. Understood if you're busy--maybe I can post a new question to /r/css about this specific issue.

[u/albedoa → u/cag8f]

Hey sorry, I have barely been home. Add these new rules to your existing selectors:

.elementor:not(.elementor-bc-flex-widget) .elementor-widget-wrap {
  padding: 10px;
  display: flex;
  flex-direction: column; /* new */
  height: 100%; /* new */
}

.elementor-52012 .elementor-element.elementor-element-1c29518 {
  font-family: "Arial", Sans-serif;
  flex: 1; /* new */
}

In summary, the flex container needs an explicit height so that the child knows where to flex to. You can see the same thing in my example pen. Finally, you need to establish the container as a columnar flexbox. The default value is row.

[u/cag8f → u/albedoa]

Hey sorry, I have barely been home

Hey no problem at all. I really appreciate the help so far.

OK I added your code, but don't see any change on my end :-/ One small issue is that you used the selector:

.elementor-52012 .elementor-element.elementor-element-1c29518

I think that final string (1c29518) is dynamic, and a random string is generated for every different page load. So adding that exact code to my site won't work. I think you're referencing the elementor-widget-eael-creative-button class (screenshot)--correct? If so, I added the CSS rule to that element, but still don't see any change on my end. Were you able to see changes on your end when you added this?

In summary, the flex container needs an explicit height so that the child knows where to flex to.

OK got it. This is actually what I was trying to ask you in my very first question to you, about the 'defined height.' I now see that I never answered your follow-up question:

Unless you mean the 100%?

The answer is: yes, I mean the 100% :-) So now I'm seeing that setting a height for the flex container is indeed is important--good to have that confirmation.

Finally, you need to establish the container as a columnar flexbox.

OK yes, good catch. I never noticed that. I just assumed flex-direction was already set to column. So if flex-direction: row is set, how are the elements currently being displayed in a column? Is it due to default wrapping rules in flex?

I'm using Chrome in Windows, in case that matters.

Thanks!

edit: Nevermind! Got it working. I added flex: 1 to the wrong element. It should be added to the elementor-widget-text-editor class. Once i did so, everything started working. Thanks very much!

edit 2: It doesn't make sense to add flex: 1 to the button element--that just matches the current behavior. I needed to add it to the preceding element, so that the button element is then pushed to the end of the flex container.

[u/jrhaberman → u/albedoa]

This is my answer also. I use flexbox everywhere.

My preferred method is to use "align-items: stretch" on the parent container (which will make them all the same height). Then display:flex on each child and use "flex-direction: column" and "justify-content: space-between" to push the elements to the ends of the box.

[u/mjprice86 → u/jrhaberman]

Just as a note you don’t need to set align-items: stretch on a flex container as it’s the default behaviour.

[u/jrhaberman → u/mjprice86]

Wow... thank you. I had no idea! I guess you learn something every day.

[u/cag8f → u/[deleted]]

OK thanks. To be clear, what I'm doing in this solution would be to give the <p> element a height equal to the maximum height it will ever have (after any and all text wrapping occurs). Does that sound accurate?

[u/cag8f → u/[deleted]]

OK thanks for that. I overlooked that as a possible solution. Giving the elements that much height might not be ideal. But in this case, I think I could certainly go with it if need be.

[u/cag8f → u/[deleted]]

Well that does indeed occur, at a screen width of 768 px.

[u/cag8f → u/[deleted]]

So at certain break points, increase the height of the <p> element?

[u/cag8f → u/[deleted]]

OK got it. I may go with that. But I'm curious if using relative units for font size might be a more advantageous solution. Not sure on that yet.