Support for larger/custom media queries/breakpoints

apart from the resized containers that we get when using the large screen media query (Activate 1200px “Large Screen” media query), is it possible to have 2 different style sheets, one for wide screen desktop, and one for “standard” screens and landscape tablets ?

I would like to have bigger sizes (text, images, etc) for large screens and smaller ones for standard screen sizes and landscape tablet.

Should I add a specific style sheet in the header ?

Thanks.

I moved 5 posts to an existing topic: How to enable iPad horizontal view

Hi guys just checking in again to see if there’s an update on when wide sites will be availble?

if you can’t wait for an update, just add in your own media query in the custom code area. =)

Thanks. I’m more interested in being able to optimise for the desktop viewport.

Hey guys,
reading through the forum, it looks like the last time it was mentioned was way back in October. Is there any word on this? I know I can add custom breakpoints once the site is published, but we will be hosting the site on another server, so I would rather try to get the breakpoints set up before hand in the Webflow environment and try to reduce the amount of a front end developer’s time later on.

Thanks!

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

Maybe I’m missing something but it looks like the page width is fixed at 940. Is this true?

I’m looking to go at least 1170px. At least that’s what my Photoshop comp is.

I also noticed the Webflow homepage is around the same size, 1165 ~ 1170px

Thanks!

Totally @monmart. We’re working on adding a media query for 1200px that’s inside in the UI soon. Thanks for the request!

What you can do for now is add this to your Custom Code tab (in your site settings) <head> field or add it to the bottom of webflow.css after export.

<style type="text/css">
  @media screen and (min-width: 1200px) {
    .w-container {
      max-width: 1170px;
    }
  }
</style>
1 Like

@thesergie, so the results will only be seen after export correct?

Try to throw this code in the Custom Code section of your site Settings. Then publish. See what that does.

Curious if this works for you. Also, I’d like to +1 on a previous mention I had for user definable break points?

@thesergie I pasted the code but I’m not sure what to expect to happen here. Does this override the width settings of some kind? My container width is still grayed?

What am I thinking?! I made a correction to the above code (I forgot that it’s in HTML, not CSS file haha).

This will work! Try it out.

@thesergie, thanks!

I pasted the code and I’m unable to see a difference. I created a section, then placed a container inside that section. My container defaults to 940px which is grayed out.

Maybe I’m retarded, did I miss something?

I’m sorry I didn’t press Publish yet, let me try this out!

Oops I left the CSS comment in the HTML. My bad. Remove this from the code you placed in the header:

// Large desktops and up
1 Like

Ah yes, it works now!

Hope you guys can implement this into the editor soon. I’m may start using Webflow for a new design in about two weeks.

Thanks!

Making this change ~ would it make our pages un-responsive then? Any ETA on the 1200 page width query?
Thanks!

@Melinda_Orr It will keep your website working exactly the same - it would just make the containers wider JUST for resolutions over 1200px - so it fills their screen more.

As for an ETA on an actual media query for it, I can’t say for sure because we are working on some really core code to really speed up Webflow for complex projects, but after that this is one of the main features we will be pumping out. Thanks for your patience! :slight_smile: