The Grid overhanging text

Support
#1

Hello

I am using an instance of The Grid where the author name is too long and it is spilling over the edge of the post box- is there anything I can do to make it automatically spill onto the next line or shrink responsively to fit within the box? This only seems to happen on mobile so attaching a screen grab below

#2

Hi There,

Thank you for writing in, you can edit the skin that you’re using on that Grid, and add a padding or margin on the Post title elements.

Essential Grid Basics Part 4: Item Skin Editor

Cheers!

#3

Thank you for this. I can’t seem to find padding/margin settings for the skin text elements themselves, only for the spacing between grid items/posts. How can I edit the margins/padding of the text elements themselves? Is there anyway to make them responsive to the size displayed?

I can drag the text box for the author smaller which will force WILLIAMS to spill over onto the next line, but if I do this it will spill over even when there is plenty of white space to fill horizontally on a desktop. The issue is only when the grid post box becomes too skinny to contain the text string of a long author named when viewed on mobile as seen in the screen shot in my original post

Hopefully there is some way to do this responsively

Thanks!

#4

Hi There.

Please add the following code to Theme Options Custom CSS

.tg-item-content-holder {
    padding: 10px !important;
}

Hope it helps

#5

This does not fix it either ie. text still hangs off over the right edge of the post box. Any other way to fix this?

#6

Hi again,

Please add the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.tg-item-content-holder a {
    word-break: break-all !important;
}
span.tg-item-author {
    width: 100% !important;
    min-width: 100% !important;
}

Cheers!

#7

Hello

I currently have the following text in my CSS which was working, but just stopped and I cannot figure out why. Again this over issue only occurs on mobile on the post at the very bottom of the grid at http://www.motherculture.love on the Dachi Cole & Candice Williams post- the word Williams hangs over the boundary of the grid box for that particular post

This is the CSS I currently have that used to work
/fix grid overhang text/
span.tg-item-author {
width: 100% !important;
min-width: 100% !important;
}

How can I make this stop the text from overhanging again?

Thanks!

#8

Hi there @whitelobster11,

I’ve just checked your website and I’m not seeing any overhanging text on your Grid titles, or author names. https://monosnap.com/file/mwV0gGBBRmQ5GO3dCQ2vgcSFYNAZtV#

Is there a different page on your site perhaps that has the issue?

Thanks!

#9

Hello

Sorry I mentioned this in the last message but maybe should have put it in bold- the over hanging text issue only occurs on mobile where it is shrunk to fit viewport width

#10

Hi,

The minimum width needs to be set to zero.

Please change your code to this.

/*fix grid overhang text*/
.tg-item span.tg-item-author {
    width: 100% !important;
    min-width: 0 !important;
}

Hope that helps.

#11

Hmmm that didn’t seem to fix it on mobile either. Is there something else I can try?

Thanks!

#12

Hello There,

You can make use of this code instead:

/*fix grid overhang text*/
.tg-item span.tg-item-author {
    word-break: break-all !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 2px 4px;
}

Hope this helps. Kindly let us know.

#13

Hello

This stopped working again as you can see on the first and last posts where the author name overhangs from The Grid element- can you please help me with some CSS that will stop the author names from overhanging again?

Thanks!

#14

Hi there,

You have some CSS errors in the codes you have in the Global CSS.

Copy and paste the all of the code that are in your Global CSS here to check for CSS errors: http://csslint.net/

#15

Thank you for this

Which parts of these errors are specifically causing the problems with the overhanging text on grid elements?

#16

Hello There,

After investigating, you are having this issue because of your broken css.

Find that block and remove the } brace.

#17

Thank you so much for this. I’ve made the change but now the text is wrapping properly BUT it is chopping the words in half on mobile and putting a linebreak in the middle of the word (see the authors names on the first and lasts posts on the page linked in the previous posts)

What do I need to do to make it so that the text wraps but pushes the entire word to the next line rather than chopping the word in half?

Is there a way to force it to resize the text to make it fit on a single line?

Thank you so much!

#18

Hi there,

It’s because of this line

word-break: break-all !important;

It will break the words by letters, and it’s added since you don’t wish it hanging. Unfortunately, depending on how long the word is, it may not break into new lines (instead, it breaks the next word to the new line), hence, the current word hangs, so the best workaround is breaking it by letter.

Another solution is just changing the font size. Like this,

.tg-item span.tg-item-author {
font-size: calc(12px + 1vw);
}

Just change the 1vw unit to make it respond to your desired view.

Thanks!

#19

That didn’t seem to work either

tell me this- is there a way to make it so that any time there is an ‘’&’’ in the grid author section it automatically makes it a line break? so if the input were:

Francis & Jill

it would display as:
Francis
&
Jill

Is there CSS I could add that would accomplish that?

#20

Hello There,

To break down words into new lines, please make use of the overflow-wrap instead.

Hope this helps.