Streaming live at 10am (PST)

Spacing and Padding Issue

I’m having some issues with the spacing and padding on a few of my pages. They look good fine in webflow, and even when I publish it to selected domain but then when I upload the code the spacing is totally different.

It occurs on the “Saatchi Art Advisory” page between the result and mobile paragraphs. If you look on the final site the spacing is completely different.

Is there something wrong with my padding, I know it’s all a bit wonky…

Any help is greatly appreciated!

Here is my public share link: [LINK][1]
([how to access public share link][2]) [2]:


The issue as I’m seeing it is having padding on all four side of your elements.

For instance, you’ve horizontally padded the navbar and h1 in the hero section but each of those is in a Webflow container that’s already set for 90% (as I recall) width by default.

The “problem” with the padding is that it’s absolute, that is, it’s telling the element (like the h1 header) to always maintain that space from the side of the body, so when the browser gets smaller, things break.

In other words, by using the padding to force the items to be centered where you want them to be at the display width you’re using for design, they become unresponsive at other widths.

As a suggestion, you might use the padding for the top and/or bottom to get the vertical spacing the way you want it, but set auto-margins (the two arrows pointing at each other at the lower right corner of the padding/margin control pad) on the containers the headings and content are in so they can be responsive.

As a further bit of info – you’ve set the hero section for text center but then locked down the container so it can’t do it. If you remove the padding from the sides of the container in the hero section, and with text-align:center (as it is), the text centers up quite nicely and can react to width changes. Also change Container 9 to inline-block so it will “shrink down” on the text, which will let the subtext align with the left edge of the “S” in Saatchi.

Because the h1 text is so large, as soon as the browser window starts getting smaller the text is going break into two lines. You’ll either need to reduce the font size for the tablet mode (and smaller) or add some line height (down in the Typography section) to the h1 so the wrapped text has some room (personally, I’d probably just start reducing the font size in keeping with the display size but that’s a personal choice). When testing on your preview I took the font down to about 50px before it went back to one-line (at a 768px display width).

All of the sections I checked (with the x-ray mode on) show horizontal padding to control the containers. I suggest just doing away with the horizontal padding altogether and just center the container. If it’s too wide in particular sections then set the width of the container (to 85%, or 80%, or whatever gives you the look you want).

Another thing you might experiment with since most of what I looked at is a basic structure of a container (that holds all the content) inside a section is:

  • set the height of the section (say to 250px or whatever looks good)
  • have no padding on the section controlling the container
  • set the container to display:flex
  • use the horizontal setting (the default)
  • click the Justify-Center and Align-Center buttons (just below the Horizontal setting)

That will center the container vertically and horizontally with no messing around with padding. And if you decide, as things go along, to tweak the height of your sections (or specific sections) you just have to change the height and the container will still end up in the center (horizontally) and middle (vertically).

Wow thanks so much. You’ve made a ton of helpful points. I’ve got some work to do! I really appreciate it!

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.