▼
Streaming live at 10am (PST)

Media queries specification inside webflow

Design help General
#1

Good afternoon everybody from France,

First, let me wish you an happy 2015 new year.

Could you please tell give me the specification of media queries inside webflow
I can see that there are 4 media. What I understand is that :

  • the design grid consists of 12 columns. Can you tell me what is the size in width in pixel of each column ?
  • What is the size in pixel beetween them (size of the gutter) ? Then I would be able to deduct the total content area

I can see that there is not sub columns as I can see when I do activate the option “Show filled grid overlay”
If anybody could tell me these specs.

Thank you very much.

Warm regards.

Stéfan

#2

Hi @Stefan_fr, we support the internal grid system based on 960px grid, but you can also create your own media queries and add css to your HEAD section of your site in Webflow in the Custom Code section of Site Setttings.

More info about media queries:

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

I hope that helps. Cheers, Dave

#3

Dear Dave,

thank you for your very quick reply.
That I wondered is where I can see inside webflow the value of retained grid ?

Can you tell me then the size of a column, the gutters and the span size each size ?

I would say :
total-columns: 12;
column-width: 60px;
gutter-width: 20px;
grid-padding: 10px;

Do you think there are the good values ?

Warm regards.

Stéfan

#4

Dear Dave,

thank you for your very quick reply.
That I wondered is where I can see inside webflow the value of retained grid ?

Can you tell me then the size of a column, the gutters and the span size each size ?

I would say :
total-columns: 12;
column-width: 60px;
gutter-width: 20px;
grid-padding: 10px;

Do you think there are the good values ?

Warm regards.

Stéfan

#5

Hi @Stefan_fr,

Thanks for your question, sorry about the delay, I think i missed your post in January :-/ Here is values:

Total width 960px
12 columns @ 60px each
Each column has 10px left & right margin which forms 20px of gutter space
Total content area is 940px

Our grid is based on 960 grid :smile: I hope this helps, Cheers, Dave

#6

Sorry Dave,

I’m a little bit lost !

What about theses values around break points ?
Is break point value 768 for tablet, 568 px for mobile landscape, 320 for mobile portrait ?

#7

Hi @Stefan_fr, Breakpoints go like this:

Deskop = 992px and above
Tablet = 991px and below
Mobile Landscape = 767px and below
Mobile Portrait = 479px and below

Those are the current breakpoints. ​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile: Cheers, Dave

#8