CSS Grid odd responsive behavior

Design help General
1

Hi, I’m playing with CSS Grid by creating a Mondrian (inspired by Jen Simmons!) and the grid spills over the canvas on the designer at certain breakpoints (landscape and portrait, in this case). However, when I preview the live site, it looks fine. Any ideas how to resolve this? It’s hard to manipulate when I can’t see certain design elements.
Thanks!

Here is my site Read-Only: Webflow - Rolos Mondrian
(how to share your site Read-Only link)

2

In general, why does there seem to be differences between your layout on the designer vs the preview when using grid? @PixelGeek I watched your live stream of the space concept and noticed you had some similar issues.

3

Hi @rolomathias

Here’s an explanation of why you’re seeing the overflow:

To see the actual design, either:

  1. Hide empty elements from the left sidebar

https://cl.ly/3e40774d7cbc/Screen%20Recording%202018-11-26%20at%2010.49%20AM.gif

  1. Set the padding on your blocks to 0,0,0,0. Even if it’s 0 by default.

https://cl.ly/1ec9c96f0ad6/Screen%20Recording%202018-11-26%20at%2010.50%20AM.gif

Hope this is helpful.

1 Like