Published on Nov 22, 2019

[Video] CSS Grid in Oxygen using Microthemer

Sridhar Katakam

This screencast shows how 5 recent posts output by Oxygen‘s Repeater component can be shown in a magazine-style grid layout using the CSS Grid feature of Microthemer (available in beta released today) without barely writing a line of code.

On larger viewports:

767px and below:

479px and below:

Microthemer Settings

You may want to make these changes in Microthemer’s preferences:

Set Always add !important to CSS styles to No .

Minify the CSS file Microthemer generates to Yes .

Click on Edit media queries icon add these so they match with the ones that Oxygen comes with:

1120px and below: @media (max-width: 1120px)
Less than 992px: @media (max-width: 991px)
Less than 768px: @media (max-width: 767px)
Less than 480px: @media (max-width: 479px)

Now the default Microthemer’s media query tabs can be hidden in the interface.

Screencast

Part 1:

Part 2:

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right