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.


Part 1:

Part 2:

Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



You need to be logged in to view and post comments.
Not a member yet? Join here.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: