Media queries

[amebadiseno]

Hi

I would like to know all the media breakpoints of x-theme, in order to use the same breakpoints for my responsive needs.I looked it up on the documentation but didn’t find it.

[nico]

Hi @amebadiseno,

There are 5 basic breakpoints.

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)

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

[amebadiseno]

HI Nico!

Thank you very much.

Is it possible to change default max-width: 767px to max-width: 768px ?
Because tablets are 768… and the grid columns span full width on 767…
Don’t you think columns should span full width for tablets? that is max-width: 768px ?

[mldarshana]

Hi There,

You can set a custom rule with @media (max-width: 768px) and it should override the defaults as well.

@media ( max-width: 768px ) {
  // your css rules
}

Hope that helps.