Grid layout makes button unclickable

Hello everyone, I made a grid layout for an about page and some sections on top of each other because of the design. I used the grid and manual positioning and I made it look just like the design but this causes one huge issue some text and most importantly the button is not clickable. How would I go about creating this layout and not have this issue?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Steven

Interesting to read your issue using buttons within Grids. We started using Grids a few months ago for panels and intend (or had intended) to build our new sites based on Grids.

We’ve just seen the same problem, but it’s a button that was working fine with all browsers, then yesterday a user reported they couldn’t get it to respond using Chrome. I tried and found that this button, and all other releases (on other sites), were not working using Chrome and Edge. I then tried Opera and the button worked.

This button is a link to an eConsultation service so pretty important to us. I’ve tried at my surgery today and the button works in Edge but not in Chrome, so looks like there may be a browser update issue at play here. I also deleted non-Webflow elements such as SearchIQ, Google Translate, Cookie pop-up to make sure nothing else was affecting the button, but still had the same issue, so looks like this issue lies with the Grid code. I also noticed that if the CSS ID (that the Grid routine adds) is removed the button works. Not much good though as the ID has all the format. But interesting nevertheless.

I’m going to contact Webflow support, but would be interested to know if you found any solution, because as things stand, we’ll be going back to building sites in the regular way with blocks!
Many thanks.

Hello! my issue was really that the design was forcing me to layout some elements on top of the buttons and was making it unclickable. your issue is a little different since in some browsers your button works.

1 Like

Hi Steven, It turned our my issue was similar. I had used the following structure from Layouts: Section > Container > Grid when I should have used Section > Grid. The inclusion of the container had masked the link and text in our grid. Webflow said:

  • The “Container” element that is being used as a Grid is corrupting the nested elements.
  • Do not ever use a “Container” element to convert into a Grid through the Display property.
  • Only use a Grid Element or convert a Div Block to a Grid for the Grid functionality

The net result of using a container (from Layouts) is that some browsers could see the link and (Opera for instance), but not Chromium browsers (Edge and Chrome). I should have spotted it in the Webflow UI as the text in my block would also not click and drag.

Maybe if someone else comes across this, the advice might be useful :slight_smile:

awesome! glad it works