2 boxes next to each other in desktop and tablet, convert to 1 box per row at phone.
Each box is clickable/touchable and navigates to a other page
Each box is covered by an image In this case the source image is 450px, but any size works as long as I can have 2 boxes on one row and a responsive layout
When mouse enabled, hovering over the box causes a subtle size animation and an overlay div with text “Open?” and a yes and no button is shown, still whole box area should still be clickable.
Container is maximum 940px, your two blacks are 450 + 2 x 10 so the total is 940… maybe there’s something generating extra space. So instead of 450px give them width:46px or 47px… should stack up nicely.
Also it works in webflow preview mode, but not in publish - so I’m assuming something is different from these modes? But in this case I think I’m missing what that could be?
It happened to me, only with the row widget. I tend to hack-fix it by lowering the values. For that kind of layout I don’t use rows anymore, but divs with display:inline-box.
the way dimensions of html elements are calculated by browsers has been a huge source of errors in the past. Still happen sometimes but it’s way better now.
I still suspect a webflow bug in here, since in the published code I had double-divs with my class names.
Anyhow I just remade it from scratch, used overflow hidden, used 45% for width and 2% for each margin, and put it in a container which had text align: centered.
Right now it seems to be working.
Still interested in knowing more what could have caused this to begin with, just for continued learning.
This is a good practice with Webflow when something doesn’t work with no rational explanation. I will check the double divs when I encounter that again.