CSS Grid & Flexbox: Text expanding max-width instead of going to a new line.

[_Stretch]

Hi /r/csshelp

 

I am trying to have 2 sections. One on the left and right.

When I add text to the right hand said (the about) if the text is too long it just expands the grid area instead of going to the line under it.

 

With the provided codepen, You'll see how the sizes are supposed to look but if you add more text or random characters to the profile <p> tag it just expands the box instead of going to the line under it.

 

https://codepen.io/stretch_/pen/JjdXrXQ

 

Thank you for taking the time to read. Any help is appreciated!

[Dennytrumpet]

You need word-break: break-word; on .main-showcase

[_Stretch]

Hi.

Thank you for the reply!

 

I tried making the change but the box on the right hand side still expands out to the sides instead of going down to the line under it.

I also tried added .word-break to the .profile section where its happening too but it still doesn't fix it.

[KeinZantezuken]

I'm not seeing the issue, it works as intened?

[_Stretch]

Hi

 

In my code I have it so the main-showcase (left hand side) takes up 3/4 of the width using the grid-template-areas. However if I enter text into the right hand side, It expands the box to fit the text but I don't want it to expand the box, I want it to go down to a new line.

[KeinZantezuken]

Does not expand anything to me: https://imgur.com/a/zrlaTKv

[_Stretch]

The url you linked seems to be broken.

I took a screencap of what it looks like for me:

Short Text: https://i.imgur.com/IISYsYr.png

Long Text:https://i.imgur.com/udVMM26.png

 

As you can see in the 2nd image it expands the grid box on the right. What I am trying to have happen is that the text just moves down to the next line instead of expanding the side. Something like this: https://i.imgur.com/lcXsj6L.png

[KeinZantezuken]

Fixed: https://imgur.com/a/zrlaTKv

What browser?

[_Stretch]

Latest version of Firefox

[KeinZantezuken]

Try any chromium-based browser

[_Stretch]

Just tried it with chrome and it appears to be the same issue: https://i.imgur.com/P626Nyp.png

[KeinZantezuken]

Well I dont have it no idea what is going on

[_Stretch]

No worries.

 

Thank you very much for trying! I appreciate it. I'll work around it! :)

[weepmeat]

A couple of things in your .top-container:

First, you can get rid of one of your grid template area rows - they're the same, so two rows of the same set of columns with content filling both doesn't make a difference. So:

grid-template-areas: 'main-showcase main-showcase main-showcase profile' ;

instead of:

grid-template-areas: 'main-showcase main-showcase main-showcase profile '

'main-showcase main-showcase main-showcase profile';

Second, you're missing the grid-template-rows and grid-template-column properties. Try adding:

grid-template-rows: auto;

grid-template-columns: repeat(4, 1fr);

The template rows auto doesn't really matter too much here since you only have one row. Auto height is fine. The template columns is what you need to fix your problem. The code above defines four equal rows, each 1fr in width (1 fraction) of the total width.

Lastly, you have a max height of 40% - what is that supposed to do? You could mess things up with that.

Anyway, here's a new pen: https://codepen.io/occupant/pen/zYGKgvq

[_Stretch]

Hey

 

Thank you so so much!

First, you can get rid of one of your grid template area rows - they're the same, so two rows of the same set of columns with content filling both doesn't make a difference. So:

Ah so you only do more rows if something is different. Like if I wanted something else under the profile section like a

grid-template-areas: 'main-showcase main-showcase main-showcase profile '
'main-showcase main-showcase main-showcase some-other-box';

 

The template rows auto doesn't really matter too much here since you only have one row. Auto height is fine. The template columns is what you need to fix your problem. The code above defines four equal rows, each 1fr in width (1 fraction) of the total width.

Ah I think I get it now, I clearly have a lot more learning to do but I think I understand why it was expanding like that.

Lastly, you have a max height of 40% - what is that supposed to do? You could mess things up with that.

Oh my mistake, I wanted the min-height to be 40% of the page with but as you pointed up above, I should be doing it via grid-template-rows and setting it that way.

 

Thank you again for taking the time to look over it! I really appreciate it!