How does responsive development work?

I obviously want my site to look equally as good on all devices - how do I properly develop a responsive site in Divhunt?

Of course!

In Divhunt, everything follows a top-down approach. This means you start with desktop, and work your way down the pre-set and/or custom break points

For example, I’ve developed this section here:

On desktop, this looks perfectly fine. Now, let’s work our way down.

Here’s how it looks on tablet:

Screenshot 2023-04-13 at 12.14.22

Still good, so I won’t make any changes here. Let’s make our way down to mobile landscape:

Screenshot 2023-04-13 at 12.15.08

Now this looks too close together - so I’m going to head to the styles panel, change the flex direction to vertical, and remove the max width from the paragraph.

Let’s take a look:

Screenshot 2023-04-13 at 12.16.35

Ah, much better. And finally, let’s take a look at mobile portrait:

Screenshot 2023-04-13 at 12.18.53

It’s pretty good, but I think the header is a bit too big - let’s reduce the size to 40px:

Screenshot 2023-04-13 at 12.18.26

Wonderful! Now, everything looks exactly as I want it to on all device sizes.

While this is a simple example, it covers the basics of everything responsive design in Divhunt!

1 Like

Is there are way to start with mobile design first and have the cascade work the other way? IMHO this is something webflow got wrong since mobile traffic past desktop traffic a long time ago --it makes sense to prioritise building the mobile site first.


This is a really great idea to consider - I think the reason most builders do desktop first isn’t because of any priority, but because it’s easier to rearrange lots of things to fit a smaller space than it is to fill up the empty space you would be left with if you took a bottom up approach.

That being said, you’re completely right - overall, mobile traffic is far more significant than desktop traffic these days, at least on B2C sites.

I’m going to put this idea in the roadmap and see what we can do - thank you for the suggestion!

1 Like

Could you do a simple explanation like this for Grid layout instead of flex?

I have never used Grid before, but now that it is an option in Divhunt I would like to try it. However I am finding it impossible to do a simple responsive design using the Grid options. I tried switching from two columns in desktop to one in mobile, but everything aligns left, no matter what I try in the design section of the interface I cannot get things to center align. Googling for Grid related help gives CSS, but I would like to learn using the Divhunt interface.


We will be making a tutorial on how grid & flex work, including responsive soon. We will post it on youtube, and I will send you a link here when we publish it.


Great, will look out for that, thanks.

Heres a tutorial on grid that we released today:


Nice one, thanks for letting me know :+1:

1 Like

Where can we find the following?

Found my answer. For anyone else, the breakpoint toggle is located on the top right bar of the builder. An icon with a breakpoint size shows the selected breakpoint.

1 Like