Positioning and Responsive Design

Horizontal Positioning

The generator provides an X (Left) control.

Settings

Example

X: 5
Unit: %

Generates positioning based on:

left: 5%;

Mirror X

Enable Mirror to position the advertisement relative to the right side.

Example:

right: 5%;
left: auto;

Center X

Enable Center to place the advertisement at the horizontal midpoint.

The generated code uses left positioning at 50% with a horizontal translation.

Screen Vertical Positioning

The Screen Y (Top) controls provide:

• Vertical offset
• Percentage or pixel units
• Center
• Mirror

Example

Screen Y: 5%

Corresponds to vertical placement based on:

top: 5%;

Mirror Y

Mirrors the vertical placement from the bottom edge.

Center Y

Attempts to vertically center the advertisement.

Positioning Caveat

The generator builds CSS positioning and transform values from several controls.

Some combinations of horizontal and vertical centering may produce competing transform declarations.

Test combined positioning options in the final embedded page.

Document Y Positioning

Document Y (Top) provides positioning relative to a calculated document height.

This is different from positioning exclusively within the visible screen area.

Controls

Example

Document Y: 50%

The generator calculates a pixel position using the document height available during generation.

Important Consideration

Document-relative positioning depends on page dimensions.

The generator calculates the document height in its own interface, not directly from the destination website.

Therefore, document-relative values should be tested carefully after embedding.

Sticky Mode

Enable Sticky Mode to generate fixed-position advertisement styling.

This can keep the advertisement associated with the viewport rather than normal document flow.

General Behavior

Fixed-position elements can remain visible as the visitor scrolls, subject to their placement and visibility rules.

Considerations

Sticky advertisements may overlap other content.

Review:

• Headers
• Navigation
• Dialogs
• Mobile controls
• Accessibility overlays
• Cookie notices

Important

The generator uses CSS fixed positioning for Sticky Mode. Its behavior is not equivalent to CSS position: sticky.

Mobile and Desktop Visibility

OK Ads provides three responsive controls.

PC-Only

When enabled, the generated CSS hides the advertisement at viewport widths of 600 pixels or less.

@media (max-width: 600px) {
  .ad-wrapper {
    display: none;
  }
}

Mobile-Only

When enabled, the generated CSS hides the advertisement at viewport widths of 600 pixels or greater.

@media (min-width: 600px) {
  .ad-wrapper {
    display: none;
  }
}

Boundary Consideration

The two rules overlap at exactly 600 pixels.

Avoid enabling both device visibility options simultaneously.

Fit Mobile

Fit Mobile modifies advertisement styling for smaller screens.

At widths of 600 pixels or less, the generator applies responsive rules including:

• Width set to the viewport width
• Automatic height
• Reduced padding
• Smaller logo dimensions
• Reduced title and slogan sizing
• Reduced call-to-action sizing
• Compact footer styling

Example

@media (max-width: 600px) {
  .ad-wrapper {
    width: 100vw !important;
    height: auto !important;
    padding: 8px !important;
    margin: 0 !important;
  }
}

Additional responsive rules are generated based on the configured typography and spacing.

Recommended Settings

Troubleshooting Placement

Advertisement Is Offscreen

Review positioning values and whether centering or mirroring is enabled.

Advertisement Overlaps Content

Adjust the dimensions or placement offsets.

Advertisement Is Too Large on Mobile

Enable Fit Mobile or reduce the configured dimensions.

Advertisement Is Hidden

Check device visibility settings and scroll-trigger rules.

Centering Looks Incorrect

Test Center X and Center Y separately before combining them.

Document Positioning Differs from Preview

The destination website may have a different document height from the generator page.

Best Practices

1. Test inside the actual destination website.
2. Check viewport widths above and below 600 pixels.
3. Avoid placing ads over important interactive elements.
4. Account for fixed headers and navigation.
5. Use moderate dimensions on mobile.
6. Test page loading and resizing behavior.

Important: Placement calculations depend on the generated CSS and the embedding page. Preview positioning is not a guarantee of identical positioning on every website.