[Aleksander HParticipant]

Hey,

What is the default media query breakpoints for X?

[Rue NelModerator]

Hello There,

Thanks for writing in!

The default media query breakpoints for X:

// Responsive Breakpoints
// =============================================================================

Small:          480px  !default;
Medium:         767px  !default;
MediumLarge:    979px  !default; // (+1 = default desktop)
Large:          1200px !default;

Let us know if this has been helpful to you.

[webworxParticipant]

Hello there,

I have a follow up question to the above Q & A.

If I understand the answer given, it means there are (5) media query breakpoints:

Small: 480px !default;
Medium: 767px !default;
MediumLarge: 979px !default;
Desktop: 980px !default;
Large: 1200px !default;

Are these the (5) media query breakpoints that are standard for X Theme?

If so, please help me understand why there are (2) breakpoints separated by a single px. I’m just not understanding why this would be a good idea.

Thanks in advance,

Dale

[Paul RModerator]

Hi Dale,

Sorry for the confusion.

The main media query breakpoints that xtheme uses are

@media (max-width: 979px)
@media (max-width: 480px)
@media (max-width: 767px)

For a more detailed information regarding breakpoints for different devices, please refer to the link below.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Hope that helps.

[webworxParticipant]

Ok, thank you for the clarification.

I read somewhere in the X Theme documentation that X Theme uses (5) breakpoints. Is this outdated information?

Also, thanks for the link to the CSS Tricks article…extremely useful.

Cheers,

Dale

[Paul RModerator]

Hi Dale,

We only use 3 in our css, can you provide us a link to this information.

Thanks

[BishiousParticipant]

@Staff:
You can deduce it from Cornerstone as following:

Extra Large – Desktop: 1200px & Up
Large – Notebook: 980px – 1199px
Medium – Tablet (Landscape): 768px – 979px
Small – Tablet (Portrait): 481px – 767px
Extra Small – Phone: 480px & Smaller

Basically:
@media (max-width: 480px)
@media (max-width: 767px)
@media (max-width: 979px)
@media (max-width: 1199px)
@media (min-width: 1200px)

I count 5 🙂

[Paul RModerator]

Hi,

Sorry for the confusion.

Yep, there are 5 breakpoints in cornerstone you can choose from.

http://screencast.com/t/GbYEqmKJ12

Just note that the 3 main breakpoints that is active by default are

@media (max-width: 979px)
@media (max-width: 767px)
@media (max-width: 480px)

Thanks

[Author]

Posts