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:

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: