How to change default break points

Community resources General
1

I have built my site using a purchased webflow template. The break point resolutions are not appropriate for my design. How do I change these values. I have looked everywhere in the css that was exported from webflow. This is really kicking my butt and need to fix this.

thanks
Brad

2

Welcome to the community, @Brad_Knorr :wave:

I believe these are defined in the JS file (not CSS) but I’m not too familiar with the exported code as most of my projects end up staying on Webflow.

Hopefully that helps!

3

I found it in the js file… but changing it is not being reflected in the website behaviour.

    site: {
      mediaQueries: [
        { key: "main", min: 992, max: 10000 },
        { key: "medium", min: 768, max: 991 },
        { key: "small", min: 480, max: 767 },
        { key: "tiny", min: 0, max: 479 },
      ],
    },
  });

Can anyone help?

Thanks
Brad

4

Webflow does not provide for custom breakpoints. They are also defined in the base CSS and rules added to the individual media queries as you add styles in the designer (desktop, tablet, mobile landscape, mobile portrait. These are the base defined MQ’s. Additional ones are added when you go > desktop in the designer.

/* Webflow default breakpoints */

@media screen and (max-width: 991px) {
/* Your responsive CSS */
}
@media screen and (max-width: 767px) {
/* Your responsive CSS */
}
@media screen and (max-width: 479px) {
/* Your responsive CSS */
}

You are free to add custom CSS if your plan allows it but you won’t be able to override these.