Need help for custom breakpoints on desktop view

Design help Custom code
1

I need help to add some custom css media queries and paste those into the Header in the custom code section. See the breakpoint I’m working on below.

1980×1291 65.7 KB

Thank you so much!
Rui

Here is my public share link: LINK
(how to access public share link)

2

Do you need just the media queries, or the styles to go inside them?

Media queries would be:

@media screen and (min-width: 1420px) {  }
@media screen and (min-width: 1180) and (max-with: 1419px) {  }
@media screen and (min-width: 940px) and (max-width: 1179) {  }
@media screen and (min-width: 700px) and (max-width: 939px) { }

Does that work? Anyone else have a better solution?

2 Likes
3

Thank you @sarahc for your response.

Is that means I need to add the code to each break point or I will have more breakpoints once I added it in the whole body?

Cheers.
Rui

4

I’m sorry, I don’t know what you mean.

In order to create custom breakpoints in Webflow, one must add Custom Code in the Head Code area, inside tags.

Example:

<style>
    @media screen and (min-width: 1420px) {
        .classname { style: value; }
    }
</style>

However, looking at that grid… I think you could accomplish that with flexbox in the Designer. I’d play around with that. Much easier to build and maintain.

5

Hi @sarahc, What do you mean the flexbox in the Designer? Do you mind forward related link?

I add the

2358×1016 96.7 KB

It says the custom code is not validated.

6

That’s just a warning to tell you that if you make a spelling mistake while applying JavaScript custom code, the page may be broken (as code will not run). You don’t seem to be using any scripts, so you’re safe.

7

@samliew, it works when I’m using the default container. How can I customize the the container size? I have 2 more wider breakpoint, 1600px and 1920px.
Cheers.

1247×796 190 KB

@sarahc, any idea with wider size breakpoint?

Thank you!

8

To create custom container widths, avoid using the Webflow container component. Drag a generic div to the designer, name it container1600 or container1920, then give it the max-width 1600px and set margin left and right to auto to center the content.

1 Like
9

Getting there. But how can I set max width.

I can set width to 1420px, but the continers couldn’t flow, they stick with the size I set up.

1050×804 395 KB

10

FIND IT @samliew

THANK YOU SO MUCH, IT HELPS ME A LOT!!

11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.