Streaming live at 10am (PST)

Activate 1200px "Large Screen" media query

Nope, Michel, that’s all you have to do. Adding that line of code will make your columns wider on larger displays. The content and styles will stay the same as in your desktop (default) device.

OK; thanks for clarification

kkilat, was just checking in the progress of the 1200px media query addition. Can you share any details around timing?

1 Like

This doesn’t actually do anything in design mode I take it?

Question from a newbie - what’s different with Webflow’s site that enables it’s responsive 1170px (?) width vs the default 960 customer sites?
Thanks for the awesomeness,
Adam

That’s correct Paul. It affects published sites.

If you add this code snippet and publish your site, people with screens 1200px and larger will see a wider version of your website that fits their screen more. What happens is the container width increases as well as the columns width and the space between the columns increase. Your conforms to these wider containers and columns.

Thanks, exactly what i’m looking for this morning!

Thanks for the trick!
Will this have an effect on a slider with images? Should I upload a 1170px version of my image then?

Hey Henrik, it depends on how you have your images set up in the slider. If the images are 100% width then they should automatically resize to fit the new size. If they are background images with COVER then the bg image will stretch. If it’s an image with a set width/height, then it would stay the same size in that media query. If that’s the case I’d make an image for that size (assuming most of your visitors will land on that size since 1200px screens are most popular).

You should publish to your subdomain and see how it will behave.

Very cool addition @ thesergie! Greatly appreciate this. I had been building my own pseudo “containers” a max width attribute on the sections and using percentage based margins, but this opens up additional options for how they behave.

Can’t wait to have this as a native webflow behavior so we can rapidly recraft content for media queries above 970px.

Loving webflow BTW - it has taken my hacked prototyping attempts from epically painful to truly empowering, fully functional and heavily featured sites in a matter of just a few days in the app. Life altering!

Thank you seems a bit inadequate! - Robert

3 Likes

thank you very much for this!

Can I ask, in base funсtional it is impossible to make sites in 1200px ? o

Hi @atreidesp, thanks for the question. You can add the custom css media query to the Header in your custom code section to make your site 1200px in published mode.

So you can make a site 1200px via custom css, but you cannot see the media query changes in the designer or preview modes. We do not have built in 1200px breakpoints, anything 991 px and higher is considered Desktop mode (including ipad horizontal view for example).

I hope that helps :slight_smile: Cheers, Dave

very good answer, my friend! Thank you!

Do you know if there are some ways to make 1024px sites as easy as in webflow ?

Hi @atreidesp, thanks. I am not sure I understand the question. You can create a site a 1024px media query as well as a query for 1200px, you can change the value as you wish in the custom css. We do not have a breakpoint for 1024, only desktop (anything over 991px). Maybe if you could clarify maybe I am not understanding the question. Cheers, Dave

i wanted to know where can we make wide(not 960px) sites in design mode. We have some sites made in 1024 and now I tried to make his copy and web flow and noticed that in web flow we can make only 960px sites.

I think its easy, similar to what @thesergie wrote:

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

Hi Dave,

can you tell me what are the different break point values please ?

What i found working also is in the designer setting max-width: 1200px on the container. Then you dont need custom code.

@Joscreative where did you change the designer setting max-width?

If you have advanced options on it shows below the normal width setting min and max width when you have the element selected.

If also found out you need to make a div-block and name it container, if you use the default container from webflow you cant chance the max settings