Ohkay I feel really dumb. Building a simple site. I'm using three instances of the "two columns" element where both column display side by side on larger displays and stack right column below left column on phone size display.

Everything is working nicely EXCEPT there is space (like a gutter) between the two columns. Each column's container is occupied by a picture. I need the pictures to abut each other with no space in between.

I've tried adjusting the layout of the column containers, the pictures, and the master container that the two column containers are nested within. Nothing I do removes the space in between.

Can somebody please advise out to remove the gutter space between the columns? Here's a link to the draft site: http://artistinall.org/2020/workinprogress/.

Also, here's a link to the rsd file: https://www.dropbox.com/s/w36tftd0wc7q12e/AIA2020v2.rsd?dl=0

Thanks,
Jim Capraro

Which of the two column components are you using?

The one for "grid" or the other one
Look in the inspector tree if it has a blue icon then that means it's for the "grid" which means you heed open the "grid" setting bit to do changes like padding to the columns ect

He is using the grid one.
Jim, open the Multi-column-layout and set the gap to 'normal'. If you have made different gap settings at different breakpoints, you need to 'normalize' them all.

Thank you, thank you, thank you.

I was moving so quickly that I forgot there were two - two column elements. I switched out of grid to the framework based layout two column element and everything now works as it should - YAY!

I really appreciate the help.

Jim Capraro

Easily done
I make habit now that one of the first thing I do when opening a project is to collapse down that grid columns thingy so only the other one is showing