#CHANGING MARGIN SIZE G DOCS HOW TO#

In mobile view, these blocks will stack on top of each other while in tablet or desktop view, these blocks will scale responsively. Sizes can go from 5 to 95 with a multiplier of 5. When your g-block is accompanied by a size-% class, you can change its default 100% size. A g-block, by default, is 100% wide and in it you can put any desired content, whether it's an image, a paragraph or even another g-grid > g-block layout. This is the container of your actual content. This is important in order to have the flex-grid working responsively. Think of it as a 100% wide div.Ī g-grid can contain only g-block elements in it, nothing else. A grid (or row), will always occupy entirely the space it's been added to. This is the container of your content surroundings and side-by-side columns. This means that if you just follow a few rules in building your responsive layout, you will never have a problem, no matter how deep your layout is going to be.įor your content you will only need to know about 3 types of classes that come with Nucleus: g-grid Nucleus main focus is to provide a flex-ready layout. Gantry 5 comes with a built-in and lightweight CSS framework that we called Nucleus. The way this is done in Gantry 5 is a lot easier than it was in Gantry 4. For example, within an article/post on your site, as opposed to being created dynamically through a particle. Sometimes, you will want to create custom responsive content within the bounds of a simple content area. Creating a Popup Login Widget (WordPress)īuilt with Grav - The Modern Flat File CMS.Creating a Popup Login Feature (Joomla).

#CHANGING MARGIN SIZE G DOCS HOW TO#

How to Create a Child Theme (WordPress).How to Load CSS / SCSS / JS / HTML from Twig.Creating a Multilingual Site (WordPress).

Changing margin size g docs