Responsive Widget¶
The Responsive widget controls whether the content that follows it is shown or hidden, based on the visitor's screen size and (optionally) whether they're logged in. Drop it on the page just before the layouts or widgets you want to control, then set rules for up to five screen-size ranges. In Edit Mode the widget shows a "Responsive Following" marker so you can always see where it sits.
Page Builder name: Responsive | PapaThemes — Version: 1.0.1
Add it to your page¶
- In Page Builder, open the widget panel and find Responsive | PapaThemes.
- Drag it onto the page directly above the content you want to show or hide.
- Open the settings panel and set your rules for each screen size.
How it works¶
The widget doesn't hold content itself — it acts as a control placed before other items. Using the Apply to setting you decide whether it affects only the next item or everything after it. For each of the five screen-size ranges you choose what should happen: show, hide, or leave the visibility unchanged.
Settings¶
Design¶
Screen Size 1 to Screen Size 5¶
There are five identical screen-size sections. Each one defines a range of screen widths and what to do for that range. Set Max to 0 to mean "no upper limit." Leave Display on Unset to make no change for that range.
| Option | What it does | Default (Screen Size 1) |
|---|---|---|
| Min | The smallest screen width (in px) this range applies to. | 0 |
| Max | The largest screen width (in px) this range applies to; use 0 for no upper limit. | 550 |
| Display | What to do at this screen size: Show, Force Show, Hide, Force Hide, or Unset (no change). | Unset |
Default ranges for the five sections:
| Section | Min | Max |
|---|---|---|
| Screen Size 1 | 0 | 550 |
| Screen Size 2 | 551 | 700 |
| Screen Size 3 | 701 | 800 |
| Screen Size 4 | 801 | 1260 |
| Screen Size 5 | 1261 | 0 (no upper limit) |
About the Display choices:
- Show / Hide — shows or hides the content for that screen range.
- Force Show / Force Hide — same as above but overrides other styles that might compete, useful when something stubbornly stays hidden or visible.
- Unset — makes no change for that range, leaving the content's normal behavior in place.
Apply¶
| Option | What it does | Default |
|---|---|---|
| Apply to | Which following content the rules affect: "All layouts & widgets following this widget" or "Only a layout or widget following this widget." | All layouts & widgets following this widget |
| Apply for login | Limit the rules to certain visitors: None (everyone), Non logged in customers, Logged in customers, or Specific customer groups. | None |
| Customer group IDs (separated by comma) | Appears when "Apply for login" is set to Specific customer groups. Enter the group IDs you want the rules to apply to, separated by commas. | Empty |
Tips¶
Place it just before the content
The widget affects whatever comes after it, so position it immediately above the layout or widget you want to control.
Use Unset to leave a range alone
Only the ranges where you set Show or Hide will change. Leave the others on Unset so you don't accidentally affect screen sizes you didn't mean to.
- Use "Only a layout or widget following this widget" when you want to control a single block, and "All layouts & widgets following this widget" to control everything below it.
- Reach for Force Show or Force Hide when a normal Show/Hide doesn't take effect because of other theme styles.
- Hidden content is still loaded by the browser, so use this for layout choices rather than to hide large videos or images you don't want downloaded.