Streaming live at 10am (PST)

Need help for custom breakpoints on desktop view


#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.

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?


#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


It says the custom code is not validated.


#6

http://flexboxgame.com

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.

@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.


#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.


#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.