Hi!
this is the situation that presents itself with the grid, mobile version. How can I keep the text inside? and to avoid breaking words!
I’m desperate 
Thanks for support!
http://www.pixelcreativi.it/pomodori/
Hello @fra_fantasy,
Thanks for writing in!
Please edit your TheGrid skin. You need to adjust the width and the font size of the text element. At the moment, the width is 200 pixels. You will need to reduce it to at least 160 pixels.
You must change the font size units to em also. Then, the font size might be just 2.5em with a line-height of 1.1em.
To know more how you can edit your grid skin, please check this out:
If this is NOT helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
To know how to create a secure note, please check this out: https://theme.co/docs/getting-support
Hi! thanks for you precious support!
Unfortunatly I can’t find a good combination :piangere:
That seems impossible to me… it is necessary to keep integral words and big, keep size proportions. In attachment (secure note) user e password.
Waiting you. :rilassato:
Hello @fra_fantasy,
Well, in that case, you will have to use custom CSS that will change the font size and the width of the text element. You can utilize the@media to make your custom CSS take effect only on smaller screens.
The sample code I gave is this:
@media(max-width: 767px){
.tg-apia-custom .tg-element-1 {
width: 160px;
font-size: 16px;
}
}
The @media tells the browser that this CSS will only take effect on screen sizes with a maximum width of 767 pixels like the portrait mode on the iPad. The custom CSS sets the width and the font size of the text element which in your case the one that displays the post title.
To learn more about the @media, width and font-size CSS property, please check this out:
- https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
- https://www.w3schools.com/cssref/pr_dim_width.asp
- https://www.w3schools.com/cssref/pr_font_font-size.asp
Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
- Intro to CSS - https://goo.gl/mFuWQT
- How to get CSS selectors - https://goo.gl/BmoH39
- Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
- CSS Media Queries - https://goo.gl/L3ZHNg
@ruenel thank you so much for your time.
Unfortunately I can’t see the results, it doesn’t seem to work. I keep having broken words…
you see different results?
I just can’t find a solution 
Hey @fra_fantasy,
It took me some time to find out that the plugin itself has a default CSS styling that breaks the word apart. It has this built-in CSS code:
.tg-item .tg-cats-holder *, .tg-item .tg-item-excerpt, .tg-item .tg-item-title, .tg-item .tg-item-title a {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
You can add this CSS word-wrap and hyphens property in the code above that I gave in my previous reply and set it to just “normal” and “none”. Please check out this article to learn more about the CSS property:
- https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
- https://www.w3schools.com/cssref/css3_pr_hyphens.asp
Merging the code from the previous reply, you will have this:
@media(max-width: 767px){
.tg-apia-custom .tg-element-1 {
width: 160px;
font-size: 16px;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}
We would love to know if this has worked for you. Thank you.
Hi @ruenel you have centered the problem!
I integrated this css after some tests (renamed .tg-apia-custom in .tg-imca):
@media(max-width: 767px){
.tg-imca .tg-element-1 .tg-item .tg-item-excerpt, .tg-item-title, .tg-item-title .tg-item h2 {
width: 160px;
font-size:20px !important;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}
I don’t know, it’s not satisfactory. Can you verify?
Thank you so much for your time!
Hello @fra_fantasy,
When I check the page URL, I am seeing this:
When I check your CSS code, there is something missing.
Since you have separated the class selectors with comma, they much have the same class wrapper to make sure that it will be applied to the grid.
@media(max-width: 767px){
.tg-imca .tg-element-1 .tg-item .tg-item-excerpt,
.tg-imca .tg-item-title,
.tg-imca .tg-item-title .tg-item h2 {
width: 160px;
font-size:20px !important;
word-wrap: normal;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
}
Pro Tip: Always indent for cleaner code. You can easily see any typo error or any missing class or character when it is indented.
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.