Responsive issues with two columned grid with elements / icon before title and paragraph

Hi there, I have two paragraphs on my home page which contain icons/logo, headings, and a button- I am trying to get these two paragraphs to remain centered on the page and responsive according to the breakpoints…they are titled “crimeMiner-Agency” and “CrimeMiner-Case Builder”- I need suggestions on how to do this correctly. Right now I have a grid within a grid, but I don’t know if that is the best way to accomplish the centering of these two paragraphs on the page? and with positioning the elements inside, is using a grid the most useful option? Would greatly appreciate the help!

If you go to chuqlab.com on the home page you can see what I’m trying to accomplish. Below is my read only link.


Here is my site Read-Only: Webflow - Chuqlab Project

Hey @MarkFisk52 I’ve recorded a video to walk through some fixes to get the design in Webflow closer to the desired result. Basically you just need to adjust a few settings on the grid column sizes and gaps. Hope this helps.

Thank you so much for the help! Your video really helped me get closer with the grid and spacing that I was wanting. However, I am still having trouble getting the two pieces of content to stay centered as I adjust the width of my screen in the preview. I need the content to look good responsively across all screens, and I am having trouble accomplishing that.

Try setting the distribution of grid children to the center on desktop. Right now it is set this way on tablet. Set it on desktop and let the other breakpoint views inherit the setting.

Also noticing that the padding is customized on tablet which is causing the center to shift left. Remove/reset this extra padding from the left on tablet.

I tried both of the tips you recommended- the first didn’t change anything, and the second the padding I had on the tablet was already at 40, not 120- here is my updated read only link: Webflow - Chuqlab Project

I did find where it was 120, and removed it- which helped on the tablet version! but on the desktop I still can’t get it to center:/

It’s looking pretty good to me. The only thing I do notice is that the padding on the sides is 40px while the gap between columns is 75px. To make this consistent for scale, either make the gap 40px or 2x the padding and use 80px. That’s my suggestion.