Editing Default Breakpoints

Helpdesk Website Builder
1

Hi all,

I’m a little out of my depth here so hopefully this all makes sense!

I have a site I’m designing where the home page hero looks terrible only on the smallest size of desktop (1024x1366), which are large tablets (iPad Pro and Galaxy Tab). I’m actually not sure why just the homepage hero looks bad because from what I remember I duplicated the homepage hero to all the other pages and just took out one image, so all the settings should be the same. But the other page heroes look fine.

Is it possible to edit the default breakpoints? I see the breakpoints in the boilerplate but can’t edit that, and none of the overrides I’ve tried in the css tab are working. I’m talking about this info:

// breakpoints
$breakpoint-xs: 36rem !default; // ~ 576px
$breakpoint-sm: 48rem !default; // ~ 768px
$breakpoint-md: 61rem !default; // ~ 976px
$breakpoint-lg: 75rem !default; // ~ 1200px
$breakpoint-xl: 100rem !default; // ~ 1600px

I’d like to include those large tablets in the medium breakpoint category so that they take on the tablet settings instead of desktop. If I edit them as desktop it destroys my entire already-optimized design so just sticking them in tablet would be so much better.

Any ideas would be really appreciated!! Thanks

2

Hi @Olivia-Riggs, welcome to the community! :waving_hand:

I totally get what you mean — that “in-between” size (1024–1366px) can be tricky because it’s technically considered a small desktop, but visually it still feels like a large tablet (iPad Pro, Galaxy Tab).

In Sitejet, the default breakpoints (like the ones you listed) are baked into the boilerplate and can’t be edited directly. But you can add your own custom media queries in the CSS tab to “catch” those edge cases. For example, if you want 1024–1366px to behave like the tablet layout, you could add something like this:

/* Treat iPad Pro / Galaxy Tab landscape like tablet */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  /* Put your tablet styles here */
  .hero-section {
    background-size: cover;
    text-align: center;
    /* etc... */
  }
}

That way, these devices won’t fall into your desktop styles — instead, they’ll reuse your tablet adjustments without breaking the rest of your design.

A couple of tips:

  • Always put these custom queries below Sitejet’s defaults so they override correctly.

  • You don’t need to rewrite everything — just the specific fixes for the hero section.

  • If you test in Chrome dev tools (choose “iPad Pro” or set a custom resolution), you’ll see exactly how it behaves.

This gives you full control without touching the boilerplate variables.

Hope this helps you smooth out that hero section! :rocket:

3

Thanks so much! I think my biggest problem originally is that I was trying to implement my code at the very top of the CSS file, forgetting the hierarchy factor.

I appreciate your response, thanks again!

1 Like