Use code NOVASHARE for an extra 10% off!
  1. Home
  2. Docs
  3. General
  4. How to use breakpoints (mobile and desktop)

How to use breakpoints (mobile and desktop)

Breakpoints are basically where a responsive media query kicks in. A media query is used to show or hide things based on the resolution of a screen.

For example, let’s say you are using the Floating Bar social share buttons. It will stick to the left side of the screen. But if you size down the browser, at some point it will disappear. A breakpoint is what controls where this happens based on the width of the screen.

Mobile breakpoint

Follow the steps below to set a mobile breakpoint.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can set a mobile breakpoint separately on both Inline Content share buttons and Floating Bar share buttons. Click on the submenu where you want to enable it. In the example below, we are setting a mobile breakpoint on “Inline Content.”

Inline Content
Inline Content

Step 3

Scroll down to the “Display” section. Under “Mobile Breakpoint” set the width in pixels (px) where you want the inline mobile breakpoint to occur. Note: The default is 1200px.

Novashare mobile breakpoint
Novashare mobile breakpoint

Step 4

Scroll down and click “Save Changes.”

Step 5

You will then want to choose what you want to happen at the breakpoint. You can set it to hide above the breakpoint, hide below the breakpoint, or both.

Hide above breakpoint

To hide above the breakpoint, follow the steps below.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can hide above the breakpoint separately on both Inline Content share buttons and Floating Bar share buttons. Click on the submenu where you want to enable it. In the example below, we are hiding above the breakpoint on “Inline Content.”

Inline Content
Inline Content

Step 3

Scroll down to the “Display” section. Toggle on the “Hide Above Breakpoint” option. Note: This is disabled by default.

Novashare hide above breakpoint
Novashare hide above breakpoint

Step 4

Scroll down and click “Save Changes.”

Hide below breakpoint

To hide below the breakpoint, follow the steps below.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

You can hide below the breakpoint separately on both Inline Content share buttons and Floating Bar share buttons. Click on the submenu where you want to enable it. In the example below, we are hiding below the breakpoint on “Inline Content.”

Inline Content
Inline Content

Step 3

Scroll down and toggle on the “Hide Below Breakpoint” option. Note: This is disabled by default.

Novashare hide below breakpoint
Novashare hide below breakpoint

Step 4

Scroll down and click “Save Changes.”

Mobile max width

You can set the max width in pixels (px) up to where the Floating Bar share buttons should display on mobile.

Step 1

Click into the Novashare plugin settings.

Novashare plugin settings
Novashare plugin settings

Step 2

Click on the “Floating Bar” submenu.

Floating Bar
Floating Bar

Step 3

Scroll down and under “Mobile Max Width” set the width in pixels (px) up to where the Floating Bar share buttons should display on mobile. Note: The default is 800px.

Mobile Max Width
Mobile Max Width

Step 4

Scroll down and click “Save Changes.”

Was this article helpful?

Related Articles