Essential grid styling

[Jennine]

Hello,
I would like to syle the essential grid as shown in the attached screenshot. How can I make a white inside border? Also, I have the text aligned left and it is showing properly in the preview on the essential grid but in the browser, it is aligned center. please see the blue boxes at this link. The read more button is not linking .Thank you

Client-Mockup-2 | JP Digital Studios

[ruenel]

Hello @Jennine,

Thanks for writing in! You will have to edit or modify the Press Release Grid skin that you are using. To learn more how you can edit the grid skin, kindly check out this documentation:

• https://www.themepunch.com/essgrid-doc/item-skin-editor/

Hope this helps.

[Jennine]

Hi Thank you. Yes I read through that. I still don’t see how to get the white inside border as shown in the screenshot. Also, The documentation doest explain why my “read more” button is not working.
Thank you.

[ruenel]

Hi @Jennine,

To better assist you with your issue, kindly 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: How The Forum Works

Best Regards.

[Jennine]

ok i will do that. Also, as the screen resizes smaller this is happening to the text inside the box. Do you know why?

Thanks

[ruenel]

Hello @Jennine,

Please customize the Layout Composition > Spaces > Content.

And then you may need to move the layers inside the dropzone:

Hope this helps.

[Jennine]

Ok thank you. I did what you said and put the layers into the drop zone. But as the screen gets smaller it cuts off the date at the top and the button on the bottom until the media queries kick in. Please see the attached screenshot. Is there a way to prevent this from happening? Thanks

[christian]

Hey @Jennine,

It’s because your content simply could not fit in the small box and Essential Grid doesn’t have an option to reduce the font size only on mobile.

Even if there would be an option to reduce the font size, the text will not be readable because it would be very small.

With that said, my suggestion for this case are:

• Limit the words in your title and description.
  
• Lower the font size of the title and description.
  
• Hide a layer if the item reaches certain width and/or height.
  
• Don’t use the Essential Grid and instead use the Content Builder and use Dynamic Content to display the Title, Excerpt, and Date.
  . You also need to use the Post Permalink Dynamic Content for the Read More button.
  

Hope that helps.

[Jennine]

Ok. Why arent the boxes responsive? It seems they should get longer in height to fit the content as the screen size gets smaller instead of cutting off the content?

[ruenel]

Hello @Jennine,

The grid skin gives your the option on how the grid item will display and how it will look like. You may need to increase the media ratio of the layout composition:

Keep ind mind that there are no responsive settings in the grid skin. You only have responsive column options in the Grid Settings.

Hope this helps.