Overview
KineticHub blocks are designed to work across desktop, tablet, and mobile layouts.
Many blocks adapt automatically to the available screen width. Depending on the selected block, you may also have controls for:
- Desktop and mobile sizing
- Mobile-specific spacing
- Responsive typography
- Block visibility
- Mobile motion behavior
- Sticky or pinned effects
- Media positioning
- Touch-friendly interactions
The available options vary between blocks because each block has a different layout and interaction model.
Open the responsive settings
Select a KineticHub block in the WordPress editor.
Open the settings sidebar using the Settings icon in the top-right corner of the editor.
Review the available panels for controls such as:
- Responsive
- Visibility
- Mobile
- Layout
- Spacing
- Typography
- Animation
- Interaction
Not every KineticHub block includes every control.
Desktop and mobile settings
Some KineticHub controls include separate values for desktop and mobile devices.
These may include:
- Font size
- Line height
- Block height
- Spacing
- Alignment
- Media size
- Content width
- Animation intensity
- Interaction behavior
When a separate mobile value is available, use it instead of relying only on the desktop setting.
A design that looks balanced on a large screen may need smaller spacing, reduced motion, or a different layout on mobile.
Visibility controls
Supported KineticHub blocks may include options to hide the block on specific device types.
Typical visibility options can include:
- Hide on desktop
- Hide on mobile
Use these controls when the same content requires a substantially different presentation on smaller screens.
For example, you may use:
- An interactive hero effect on desktop
- A simplified image or static section on mobile
- A wide split layout on desktop
- A stacked content layout on mobile
Visibility controls affect whether the selected block is displayed. They do not automatically create a replacement block.
Avoid unnecessary duplicate content
Creating separate desktop and mobile sections can be useful, but it should not be the default solution for every responsive adjustment.
Duplicated content can:
- Increase page size
- Make editing more difficult
- Create accessibility issues
- Cause inconsistent updates
- Add unnecessary scripts and media
- Produce repeated headings or links
First try the block’s responsive settings.
Create separate desktop and mobile versions only when the layouts or interactions are significantly different.
Mobile motion
The KineticHub dashboard includes a global mobile motion option.
This setting controls whether supported motion effects can run on mobile devices.
Disabling mobile motion does not necessarily hide the block.
The block should continue to display its content while supported animations or interactions are reduced or removed.
This is different from a block visibility control:
- Mobile motion disabled: the content remains visible with reduced motion
- Hide on mobile: the entire block is hidden on mobile devices
Use the option that matches the intended result.
Responsive typography
Text often requires separate adjustments on smaller screens.
When supported by the block, configure:
- Mobile font size
- Mobile line height
- Text alignment
- Maximum content width
- Word wrapping
- Letter spacing
- Heading level
Check that headings do not:
- Overflow the viewport
- Break into awkward single-word lines
- Cover interactive controls
- Become too small to read
- Create excessive vertical space
For animated typography, confirm that the text remains readable before, during, and after the animation.
Responsive spacing
Large desktop spacing can create excessive empty areas on mobile.
Review:
- Top and bottom padding
- Column gaps
- Margins
- Minimum height
- Section height
- Media spacing
- Button spacing
Avoid using large Spacer blocks to repair a responsive layout.
Use the block’s spacing controls or the parent Group block settings where possible.
Responsive media
Images and other media should fit the available container without overflowing.
For responsive media:
- Use images close to the largest displayed size
- Avoid fixed widths wider than the viewport
- Preserve the intended aspect ratio
- Use appropriate object-fit behavior
- Compress images before uploading
- Check image cropping on mobile
- Provide alternative text where required
A media layout that uses side-by-side columns on desktop may need to stack vertically on mobile.
Touch interactions
Desktop users interact with a mouse or trackpad. Mobile users interact through touch.
Pointer-based effects may behave differently on touchscreens.
Examples include:
- Magnetic movement
- Cursor reveal effects
- Hover states
- Before-and-after dragging
- Interactive 3D tilt
- Pointer-following backgrounds
When testing these effects on mobile, confirm that:
- Links remain easy to select
- Buttons respond to taps
- Dragging does not block normal page scrolling
- Important content does not depend only on hover
- The interaction can be understood without a cursor
- The user can still navigate the page normally
Do not rely on hover alone to reveal essential information.
Sticky and pinned layouts
Sticky or pinned effects require enough space and a compatible parent layout.
On smaller screens, these effects may be reduced, disabled, or converted into a normal content flow.
For responsive sticky layouts:
- Test the complete section height
- Check the parent container overflow
- Avoid incompatible transforms on parent elements
- Confirm that content can still be scrolled
- Check mobile browser address-bar behavior
- Avoid pinning content taller than the viewport
A normal stacked layout is often more usable than a complex pinned interaction on a small screen.
Preview responsive layouts in WordPress
The WordPress editor includes desktop, tablet, and mobile preview options.
Use these previews to identify obvious layout problems.
However, editor previews do not reproduce every frontend condition exactly.
After editing:
- Save or update the page
- Open the frontend preview
- Resize the browser window
- Test a real phone or tablet
- Check portrait and landscape orientation
- Test interactive controls
- Confirm that hidden blocks behave correctly
Real-device testing is especially important for touch, sticky, audio, video, and WebGL effects.
Recommended responsive workflow
Use this process for each page:
- Build the desktop layout
- Review tablet widths
- Configure available mobile values
- Reduce excessive spacing
- Check typography and wrapping
- Test media cropping
- Test touch interactions
- Simplify complex motion where necessary
- Use visibility controls only when required
- Verify the final page on a real mobile device
Do not leave responsive testing until the entire website is complete.
Accessibility considerations
Responsive controls should not make important content unavailable.
Before hiding a block, check whether it contains:
- A main heading
- Navigation
- A call-to-action
- Contact information
- Form instructions
- Product information
- Essential media
- Important links
When creating separate desktop and mobile versions, avoid exposing both copies to screen readers at the same time.
The visible mobile alternative should provide the same essential information and functionality as the desktop version.
Performance considerations
Responsive design can also affect page performance.
For better mobile performance:
- Avoid loading several complex animated sections
- Compress large images
- Use poster images for videos
- Reduce continuously running effects
- Avoid duplicate desktop and mobile media when possible
- Use static fallbacks for heavy visual effects
- Test pages on slower mobile connections
Hiding a block with CSS does not always guarantee that all associated media or resources are prevented from loading.
Avoid adding heavy hidden content unless it is genuinely necessary.
Troubleshooting
A block is hidden on the wrong device
Select the block and review its visibility controls.
Confirm that the correct option is enabled.
Then clear cached CSS and reload the frontend page in a private browser window.
The editor preview looks correct, but mobile is different
The editor preview is an approximation.
Check the real frontend on an actual mobile device.
Also review theme styles, parent block widths, caching, and optimization settings.
Content overflows the mobile screen
Check for:
- Fixed pixel widths
- Large minimum widths
- Long unbroken text
- Oversized typography
- Large horizontal padding
- Media wider than its container
- Transformed child elements
- Negative margins
Temporarily remove custom spacing or width settings to identify the source.
Hover effects do not work on mobile
Mobile devices do not provide the same hover behavior as a desktop pointer.
Use the block’s touch or mobile fallback behavior where available.
Do not use hover to hide essential content.
Sticky content does not work on mobile
Check whether:
- Sticky behavior is enabled for mobile
- A parent container uses incompatible overflow
- A parent element has a transform
- The sticky item is taller than the viewport
- The section does not have enough scrollable height
Use a normal stacked layout when sticky behavior is not appropriate for the available screen size.
A hidden block leaves empty space
Check the spacing applied to:
- The parent Group block
- The surrounding section
- Spacer blocks
- Margins and padding
- Minimum height settings
The empty area may belong to the parent container rather than the hidden KineticHub block.
Mobile changes are not visible
Clear:
- Browser cache
- WordPress cache
- Optimization-plugin cache
- Generated CSS
- Server cache
- CDN cache
Then test the page in a private browser window.
Next step
Continue with Reduced Motion and Accessibility to learn how KineticHub responds to accessibility preferences and how to keep animated content usable for all visitors.