Skip to main content

Make a section invisible Section visibility

See a section only on small screens -

Into Section / Advanced / CLASSES  add: 

uk-hidden@m

See a section only on large screens -

Into Section / Advanced / CLASSES  add: 

uk-visible@l

 

 

More detail:

https://getuikit.com/docs/visibility

edit the section in the page builder by clicking on the pencil icon next to the section name

click on the Advanced tab 

enter

Show on small screens: 

uk-hidden@m

 Show on large screens

uk-hidden@l

 

 uk-hidden@l> into the field Class for sections that shall only be visible on small screens (screen width of 0–1199px by default)

alternatively, enter uk-visible@l> into the field Class for sections that shall only be visible on large screens (screen width of 1200px and more by default)

alternatively, if you need to target a specific device width, enter the following into the field CSS (adjust the values to your needs)

/* section only visible on screens with a width of 900px and more */
@media(max-width: 899px) {
    .el-section {
        display: none;
    }
}

or

/* section only visible on screens with a width of 0–899px */
@media(min-width: 900px) {
    .el-section {
        display: none;
    }
}

Here is the list of visibility classes available: https://getuikit.com/docs/visibility

Please also be informed that there is a Visibility setting in the general settings of each element. If no element in a section is visible, this section will collapse and not be visible either (also see collapsing layouts).

  • Hits: 30