Divs are not hidden on fullscreen but whit the hideOnFullScreen class you can force anything to hide in the article.
This is used on page /online-puzzle-simulators/

Contents

1About Cubing
- 1.1The best Rubik's Cubes
- 1.2Style your cube
2Pyraminx
3Square-1

This page is just a demonstration of the custom styles this website is using 🙂
~

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

~
span class="rots"
F' R' U' L' D'

Infographics

The .ig classes create responsive information cards, statistics, timelines, formulas, notation guides, callouts and other visual article elements.

`.ig` Basic Infographic Container

.ig-heading and .ig-subtitle This is the basic infographic wrapper. It provides spacing, a subtle border, a light background and consistent typography.

`.ig-grid` with Statistic Cards

.ig-card, .ig-card-4, .ig-value and .ig-label

8 .ig-card-4
Four cards per row

12 .ig-value
Large numerical value

24 .ig-label
Supporting description

1.2 sec .ig-value-small
Smaller value text

Three-Column Cards

.ig-card-3

01 First .ig-card-3

02 Second .ig-card-3

03 Third .ig-card-3

Two-Column Cards

.ig-card-2

50% First .ig-card-2

50% Second .ig-card-2

`.ig-update`

Use this variation for recent changes, corrections, announcements or important updates.

`.ig-callout`

Use this purple callout for interesting notes, explanations, recommendations or additional context.

`.ig-warning`

Use this variation for warnings, limitations, common mistakes and information requiring special attention.

`.ig-toc` Table of Contents

.ig-toc-list

Basic infographic container
Responsive statistic cards
Puzzle part breakdown
Step-by-step cycle
Historical timeline
Facts and comparisons
Mathematical formulas
Notation reference

`.ig-parts` Component Breakdown

.ig-part, .ig-part-edge and .ig-part-center

8 .ig-part Default component card with a blue top border.

12 .ig-part-edge Component card with a green top border.

6 .ig-part-center Component card with an orange top border.

`.ig-cycle` Step Sequence

.ig-cycle-number inside responsive cards

1 Inspect Find the pieces that need to be solved.

2 Plan Choose the correct move sequence.

3 Execute Perform the moves carefully.

4 Verify Check the result before continuing.

`.ig-timeline`

.ig-timeline-item, .ig-year and .ig-timeline-content

1974

First milestone This is an example timeline description using .ig-timeline-content.

1980s

Growing popularity Each event is positioned along the vertical timeline.

Today

Modern development The final item automatically removes its extra bottom padding.

`.ig-facts` Fact Cards

.ig-fact

Responsive layout Two .ig-fact elements appear per row on larger screens.

Automatic stacking The cards become full-width elements on narrow screens.

Highlighted border The blue left border separates facts from ordinary article text.

Flexible content Cards can contain facts, definitions, benefits or comparisons.

`.ig-formula`

.ig-formula-main: 8! × 3⁷ = .ig-formula-result: 88,179,840 .ig-formula-caption provides an explanation below the calculation.

`.ig-math-step` Calculation Breakdown

.ig-math-divisor The prominent value or mathematical operation appears in the left column.

÷ 2

Second calculation step Each .ig-math-step becomes vertically stacked on small screens.

× 3⁷

Final calculation step The description explains why the operation is required.

`.ig-notation` Move Reference

.ig-move, .rots and .ig-move-desc

R .rots
Turn the right face clockwise.

R' .ig-move-desc
Turn the right face counterclockwise.

R2 Turn the right face twice.

L Turn the left face clockwise.

U Turn the upper face clockwise.

F Turn the front face clockwise.

`.ig-equivalence`

R R = R2 .ig-equivalence-note: Two clockwise turns are equivalent to one double turn.

`.ig-wca`

Infographic with a prominent blue top border This variation can highlight competition rules, official records, event specifications or organizational information.

`.ig-fact-list`

.ig-fact-row and .ig-fact-number

Numbered fact row The number uses .ig-fact-number, while the complete row uses .ig-fact-row.

Automatic separators A subtle horizontal border separates each item from the next.

Clean final row The border is automatically removed from the final item.

Responsive Behavior

@media (max-width:1050px) and @media (max-width:640px) Four-column and three-column elements become two-column layouts below 1050 pixels to account for the sidebar-constrained article width. Cards, facts, notation examples and puzzle-part panels become full-width below 640 pixels.

Scroll to id link:
<a href="#anchor1" class="scrollLink">Scroll to anchor 1</a>
<span id="anchor1">Anchor 1</span>
Click here to scroll to anchor 1