Get the M2M ICP Discovery Worksheet
Know who your website should speak to and what to say.
Here are 7 Webflow build tips from a site fix. We all know that Webflow is powerful, but it can also get out of hand quickly. I'm helping a fellow designer / developer tidy up their site.
My work this morning reminded me of a couple of tips that will save you a ton of time and headache.
1️. Use Finsweet's Client First System or something similar
If you do nothing else on this list, using this system will save you so much time and headache. It might have a slight learning curve, but the small investment of time to wrap your mind around it is worth it.
2️. Name everything
You should never place a div, grid, or flexbox on a page without naming it. You can get away without naming an image or text, if you wrap it in a div and use that div for spacing. But everything else needs a name or you will end up with grid 15 and have no idea what it goes with.
3️. Use H1 once on the page and in the header section.
If you need a bigger heading later on in the page, choose a heading, specify it as H2, give it a name 😁, and then style it to look like the H1.
Your H1, Title Tag, and Url should all be the same or similar, as they tell Google what your page is about. Including multiple H1's confuse search engines and will hurt your page's ranking.
4️. Choose your layout tool wisely.
Flexbox is super powerful, but using it as a main layout for a section can be a little tricky. Try using Grid for the main layout, and then Flexbox inside the Grid. Certainly, this is not a hard and fast rule, but I find Grid to work well for the main layout of a section.
When it comes to mobile responsiveness, I also find changing from Grid to Flexbox and setting the Flexbox to wrap can be helpful. Especially if you need the picture that is on the right side on top. It is much easier to press the swap button with Flexbox.
5️. Use Gap with Grid and Flexbox to space items.
It is much easier to space out items with Gap rather than adding margin.
Especially when you forget there is margin added and you are wondering why everything isn't lining up on mobile views.
6️. Page Padding and Container Max Width
Even if you don't use Finsweet's Client First system, it is a good idea to wrap everything in a section with a Page Padding and a Container Div. This will insure everything is properly spaced on the page from the margins of the browser.
Pro tip - Don't use Webflow's stock container. Add a div, name it container, and set its max width to whatever the max width of your design is. You can't change Webflow's stock container.
7️. Hierarchy is crucial, especially in the header.
It is the first part of your page everyone is going to see. Use larger fonts and colors to draw people to particular elements. But be careful. Highlight the main thing. You aren't working with hierarchy in your design if everything is the main thing. Pick what you want to draw attention to and draw attention to it.
I'm confident if you take the 7 Webflow build tips from a recent site fix and incorporate them into your next build, you will build better and faster!
Your Marketing Isn't Bringing in Leads and You Can't Figure Out Why
Score your marketing across 7 key areas in 5 minutes and find out exactly what's holding back your leads and what to fix first.
Questions You Might Be Asking
You can — but you can't change its max-width, which locks you into Webflow's opinion of what's 'contained' and makes responsive tuning awkward. A custom div named container with your own max-width gives you full control over your design system and scales cleanly as Webflow adds new breakpoints or layout primitives.
Grid shines for 2D layouts where you need alignment in both rows and columns — think card grids, page-level section structure, or anything with a strict layout. Flexbox wins for 1D content flow, especially when items need to reorder, wrap, or swap position on smaller screens. Most sections work best with Grid on the outside and Flex on the inside.
Google has said its algorithm handles multiple H1s, but there's zero upside to using them. A single H1 matched to the page title and URL gives search engines the clearest signal about the page's topic. Style H2s to look like H1s wherever you need visual variety — the ranking conservatism costs nothing and protects you if Google tightens up later.
Gap is set once on the parent and applies consistently between every child — no collapsing, no double margins where siblings meet, no first-or-last-child edge cases. Margin on individual items creates the most common layout bugs you'll see on mobile. Gap is predictable, responsive, and cuts down on class bloat.
