The Grid - Responsive Design Issues

Support
#1

Hi,

I am using Pro successfully on my development site. On the homepage I have a section into which I am placing a 4 square The Grid, which I want to link through to specific product categories. Although I have got most of the set-up correct, I have a few niggles:

1. Font Size for Different Screen Sizes
The admin end of The Grid in Pro does not seem to allow for responsive design. I have tried to use the @media (max-width:…){} CSS to reduce the font sizes for different devices. However, testing this with an iPhone 7, iPad Mini 2 and another device gives very different and unexpected results, with the text not behaving as I want it to - too large, extends outside the grid square, etc.

2. Background Behind Text
Closely related to point 1 above, I have placed an opaque background behind the text. Again, different padding is needed for different devices and this does not seem to be successful with Additional CSS for the same reasons as in point 1.

3. Overlay
I originally tried to get around the problems in point 2 by using an overlay which was animated to slide from the top of the skin’s grid square to 20% from the bottom of the grid square. This worked well, except for that the overlay simply slides down the screen in its entirety. I had hoped the overlay would disappear from view when it reaches the bottom edge of the grid square, so leaving 20% visible. Is this possible?

4. Grid Size
A final question, I have chosen to use just 2 columns and a total of 4 squares in my grid. Can the overall size of the grid be influenced? The 4 square grid (1:1 ratio) fills the entire area of the container’s width. I would ideally like the grid to be about 50% of this size.

You can view the above problems on my website, which is under development - www.elliewhite.co.uk/wp/
The section is on the homepage (the link above) about mid-way down the screen.

Thanks for any help you can give me.

Kind regards,
Chris

#2

Hi there,

  • To have a unified look for your Grid I suggest that you use the responsive text functionality of the theme. Please kindly read this article for more information:

https://theme.co/changelog/#theme-x-5-1-0

  • Try to use the percentage units for the padding and not pixels to have a better result.

  • Unfortunately it is not possible to achieve the effect you want using Overlays.

  • The 1 column layout does take 100% of the screen as it should be. You can not have a 50% width for 1 column as it will change the view and will force the columns to be 2 in a row.

I suggest that you use Essential Grid as it has more options regarding the layout of the grid and you may have a better control over the look of your Grid.

Thank you.