Documentation-based practice example; check the controls in your installed Oxygen version.
What it does and when to use it
Group content and create a layout with the right HTML meaning. This example focuses on one achievable outcome rather than listing every possible setting.
Before you start
Start with a test page and the data or assets described in the example. The values below are starting points, not universal design defaults.
Worked example: A responsive project introduction
Scenario: A responsive project introduction. The goal is a useful result on a real project, not a claim that this scenario was a completed client project.
- Create a section container with a heading and a nested content container.
- Put project copy and a screenshot in separate children; apply a shared class to the parent.
- Use a two-column layout on a wide screen and one column when the text becomes cramped; start with a 24px gap and adjust for your content.
Live layout illustration · HTML/CSS
Project introduction
Readable copy in the first column. The layout stacks when space becomes limited.
This illustrates the second column; place your real screenshot here.
Layout CSS for a project introduction
.project-intro {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
@media (max-width: 767px) {
.project-intro { grid-template-columns: minmax(0, 1fr); }
}Apply this class to the parent containing the copy and image. The media query is an example; use the breakpoint that suits your content. Configure the same properties through Oxygen controls instead when that is your styling method.
Expected result
You should have a responsive project introduction. Verify the result on the frontend using the same content or object described in the steps. A correct builder preview alone does not establish that links, data or interactions work for visitors.
Troubleshooting
If an image forces horizontal scrolling, constrain its width and let the layout columns shrink. Do not add more wrappers to hide an overflowing child.
Checks before publishing
Avoid extra wrappers with no purpose. A section needs a meaningful heading; a visual box does not automatically need a section tag.
- Compare desktop and narrow-screen layouts using actual content.
- Follow every destination and operate interactive controls with a keyboard where applicable.
- Check an empty or unavailable-data state when the element depends on a provider.
Official reference and version notes
Official Container reference provides the current provider information. This is independent, AI-assisted documentation on Benjamin Olsen’s website; examples are clearly identified as practice recipes.
The native references were checked against the site’s Oxygen 6.2.0-beta.9 installation and public documentation. Individual recipes should still be validated in your project.