Responsive design breakpoints

Helpdesk Website Builder
1

I’m almost finalised with my landing page and need to make quite a few changes to make sure it’s responsive.

If I select the mobile breakpoint at the top of SiteJet builder, will this only apply those changes to the mobile breakpoint? Keeping the rest of the CSS for desktop and tablet untouched?

If not, how would I go about doing this?

2

Hi @Matt_J!

Yes – in SiteJet builder, when you select the mobile breakpoint at the top, the changes you make while in that view will generally only apply to the mobile breakpoint. Your desktop and tablet layouts will remain as they are.

SiteJet uses responsive breakpoints, so any adjustments made specifically in mobile view (like font sizes, spacing, or layout tweaks) are saved for that breakpoint only.

This way, you can target exactly the devices you want without affecting desktop.

But there’s an exception: If you edit a global property (like a global H1 style, font, or color), that change affects all breakpoints, no matter which view you’re in. That’s why sometimes changing a heading in mobile view seems to change desktop as well.
As a general rule in responsive design:

  • Changes made in desktop view cascade down to tablet and mobile (unless you override them).
  • Changes made in tablet view cascade down to mobile, but won’t affect desktop.
  • Changes made in mobile view affect only mobile – they do not go back up to tablet or desktop.

So if you want something to be mobile-only, make the change while in the mobile breakpoint. If you want it to apply to both tablet and mobile, do it in the tablet breakpoint.

You can also use custom CSS media queries for even finer control:

css

@media (max-width: 768px) {
  /* Styles for tablet and smaller */
}

@media (max-width: 480px) {
  /* Styles for mobile only */
}

This way, you can precisely decide which devices get which changes.

Hope that clears it up!

1 Like
3

Hey @Matt_J

We do have an article about how to use the responsive feature:

https://help.sitejet.io/hc/en-us/articles/24275878741015-Responsiveness

The most important things to look out for:

The changes are downward applicable. So changes in tablet will apply in mobile, as well. Unless you re-adjust mobile.

You can hide containers for certain viewports. This is especially useful, when you have a certain idea that only works for desktop but you dont want it in any other viewport or need to realize it differently on mobile, e.g.

The global design settings can also be adjusted for each viewport.

That information is not completely right.

1 Like
4

Yeah I’ve found issues where if I change the font size while in the mobile breakpoint, it affects everything else. I’ll have a run through the article and see where I get up to.

Thanks.

2 Likes
5

I’m having some difficulties changing the site of buttons and changing text size.
If I make any changes in the boxes seen here -

image
image1106×1239 102 KB

they are applied to every breakpoint. Is there a way to make the requited changes without setting a class to each text block and manually adding in the CSS?

1 Like
6

Thanks @Andre for sharing your view — and I completely agree that clarity on what’s actually responsive in Sitejet vs what’s global is crucial.

From my own testing (and some trial and error), here’s what I’ve observed:

  • Font size, padding, alignment, and even visibility can be adjusted per viewport, using the Design panel.

  • But elements like the H tag (H1/H2), font family, or actual text content remain global across all viewports — which makes sense for consistency, but can be limiting in some designs.

I think the confusion sometimes comes from how Sitejet exposes these options — it’s not always intuitive or fully documented.

As a practical workaround, you can work around Sitejet’s global limitations by duplicating an element (like an H1) and using the visibility settings to show it only on specific breakpoints (e.g., desktop vs mobile).

Personally, I often handle this with custom media queries, especially when I want tighter control.

Example (outside Sitejet):

css

h1 { font-size: 28px; } @media (min-width: 768px) { h1 { font-size: 36px; } } @media (min-width: 1024px) { h1 { font-size: 48px; } }

This keeps content consistent while making layout fully responsive.

If you (or anyone) has a different result or a workaround that behaves differently, I’d genuinely love to see an example or screen — I’m actively learning and documenting these nuances for real-world projects and training purposes.

Cheers!

7

Have you tried setting the font size in the global design settings?

8

I am able to set the font size for each H tag globally for each viewport. I do not see any use-case where it makes sense to change the font family on one website depending on the viewport. So I do not see where this is not intuitiv?

You can always change that in the HTML though for each text content or even in the code. But I guess that is 1% of the cases, right?

Actually, it is great to provide workarounds and ideas. Sitejet is always targeted towards the general user and general website. Specials can be achieved using a workaround. So I think that is great :slight_smile:

1 Like