Page layout help

Hi All!
I’m trying to replicate the page layout below, where there is no spacing at all all between page components. What should my theme settings be? I’m comfortable with article and components settings to remove spacing and add the needed padding. However, when I try to replicate, as soon as I add text to the gray component/article, it creates a lot of spacing before and after the text, even though settings in articles, article styles, blocks and components are set to 0 padding.
Thanks in advance for any tips!

Some things you might want to check out:

  1. Is there an Article Style applied to the article containing this content? If so you need to be attending to the padding settings within this style and not at the base theme level.

  2. Check the padding AND margins on both the Article and Block, and also the Header and Body texts of those too. There are a lot more places than you realise which have these applied! Work systematically through from Article through Block and Component, checking for all padding

  3. Make use of the Inspector. use the little blue arrow box to the bottom right of live preview window, turn on the Target icon and then hover over your various elements. You should see where the padding is lying…

  4. If still no joy, try Devtools. If you’re in Chrome, press F12 so that the browser inspector appears. All you need to do is use the tool at the top left of the window that appears (dotted box with arrow in it) - click on it to turn it on and then do the same as in 3 - hover over all the elements on your page and you can see even better what has padding and margins around it (as in the second image).



m

If you’re still struggling, let us know and we can investigate further.