Essential Grid Responsive text

Support
#1

I created a nice grid but the Titles get messed up when the responsive decided to make the title multi line.

Is there a code that adjusts text size based on width available to ensure the text takes advantage of the full line available without folding over onto the next line.

#2

Hi @dmedianik,

Thank you for writing in, please add this to your Grid CSS or Page > CSS

.esg-grid a {
	white-space: nowrap;
}

This will keep your titles in one line. But I suggest that you avoid the 6 column row. Because of your content look squeeze and some of the title gets overflown with that layout.

Cheers!

#3

Thanks @friech, can you also give a hint what setting do I need to adjust to keep the grid from getting cut off.

Not sure if this is being caused by a grid setting or the max width set in the theme option or if its because of the section/row.

I changed the item spacing in grid setting to 15px (it was 20 before) and it seemed to solve the problem on my monitor. I’m just worried on other screen sizes it might cut off the items again.

Also is it possible to use the Responsive text feature from within the theme options and use css to adjust the text size in the grid? I think I’m struggling on trying to adjust the design on all screen sizes meanwhile the only reason there’s issues is because of the text not scaling down to reflect smaller screen sizes.

#4

Hi @dmedianik,

May I see a screenshot from your view? I’m not just which part is being cut off. I checked on other sizes too. And yes, changing the spacing should work too, the size could actually have an excess pixel when they added. Example, 10.5px will be 10px, but combined together with other items it may be 10.5 + 10.5 is 22px, excess of 2px and clipped.

And yes, you could try the responsive text feature and use the selector .eg-store-items-element-1. But no CSS, the responsive text feature is a javascript feature.

Thanks!

#5

The Surprise starts getting cut off and Connoisseurs Delight is leaving the box

#6

Hi @dmedianik,

To fix it, you can try adding this in your grid’s Custom CSS

@media(max-width:480px) {
.esg-grid a {
    hyphens: initial;
    font-size: 14px !important;
    word-break: break-word;
}
}

https://www.themepunch.com/faq/where-to-add-custom-css-javascript/

Hope this helps

#7

That worked perfectly.

#8

Glad this helps!

Cheers.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.