Widget settings for tablet/mobile

You can adjust the settings of your widget so it can look different on desktop, tablet, and mobile devices. It can be achieved with a single widget. You do not need to create a separate widget for mobile devices.

If you have an upgraded widget, please go to your edit widget page. If you don’t know how to do that, please read the following article – How to change settings of my widget? If you have a free widget or you are just starting out, please create a new widget.

Example widget assumptions

Let’s say that you want to create a widget with the following settings:

  • Desktop (default settings) – 2 rows and 6 columns grid with hover effect.
  • Tablet – 2 rows and 3 columns grid without hover effect.
  • Mobile – 1 column slideshow without hover effect.

Given settings are applied based on the widget width. If the widget width is between:

  • 0-640 pixels – mobile settings with slideshow should be active
  • 641-960 pixels – tablet settings should be active
  • 960- ∞ pixels – desktop settings (which are default) should be active

Creating the widget – desktop configuration

When you create a new widget or edit the existing one, you will always start with the desktop preview and desktop settings. This is indicated by the highlighted device icon above your widget preview.

According to our assumptions, we need a grid with 1 row and 6 columns and the hover effect when the user will view our widget from a desktop device.

Open the Layout section on the left side to configure the basic widget layout. The desktop icon next to the Layout label indicates that you are configuring your widget for desktop devices.

Set the Post layout to Grid, use the slider or the input field to set the Number of columns to 6 and the Number of photos to 12 to get two rows of photos.

Screenshot showing widget creator form with the desktop settings.

We also want to have a hover effect on desktop devices. Open the Posts section and in Post hover effect select one of the available hover effects, for instance, the Instagram icon.

Configuration for tablet devices

All the settings that you set for the desktop device are automatically copied to tablet and mobile settings unless they were already modified. The settings are copied only downwards (from desktop to tablet and mobile, or from tablet to mobile), never up. This means that changing the settings for a mobile device will not affect the configuration of the tablet or desktop.

Click the middle button with the Tablet icon in the device selector above your widget preview.

Screenshot showing device selector with tablet icon active.

All the icons next to the section names will also change to tablet, which will indicate that you are changing tablet settings. Sections without device icons are globally adjusted and can’t be changed based on the device.

The assumptions for tablet devices are 2 rows and 3 columns but without the hover effect. Let’s start with the hover effect since most probably the Posts section is still open. Select None to disable the hover effect.

Screenshot showing disabled hover effect for tablet configuration.

Open the Layout section and adjust the settings to show 2 rows and 3 columns. Set the Number of columns to 3 and make sure that the Number of photos is set to 6.

Screenshot showing layout section with the configuration for tablet devices.

Try to switch between Desktop and Tablet devices using the device selection above your widget preview to see how to widget changes.

Configuration for mobile devices

It is time to configure the widget for mobile devices. Using the device selector above your widget preview click the last button with the Mobile icon.

Screenshot of the device selector with mobile icon highlighted.

The assumption for mobile devices was 1 column slideshow without any hover effect. We don’t need to change the hover effect, since all the settings from tablet devices were copied to mobile device settings.

Open the Layout section. Change the Post layout value from Grid to Slider and update the Number of columns to 1.

Screenshot showing mobile configuration for the widget.

You can try to switch between the different devices to see if the widget is showing the proper settings.

Adjusting the settings for proper widths

Lastly, we need to adjust on which widget width the settings will be applied. We assumed that tablet settings should be loaded when the widget width is lower or equal to 960 pixels and mobile when widget width is lower than 640 pixels.

Open the Advanced section. Update the Widget width for tablet settings to 960 pixels and the Widget width for mobile settings to 640 pixels.

Screenshot showing advanced configuration section with widget widths options.

Testing the responsive preview

You may have noticed that every time you change the device with the device selector, the widget reloads. Likewise, if you reduce or increase the size of the browser window, the widget will only show the settings for the selected device, regardless of the real size of the widget.

This is due to the widget creator settings. You can change this behavior and let the widget behave like on your website without reloading on the device change.

Click the button with 3 dots next to the device selector. A context menu will appear. Make sure that the Responsive preview option is turned on.

Comments (11)

  • Hi Currently my instagram feed is not showing on the mobile version of my blog. I have a blogger blog with a custom theme. Can you please advise how I can get my instagram feed to show? Do i need a special code? Thank you

    byrning__love

    • H i there. You don't need any special code. Please send us a support ticket. We will try to help you out:)

      lightwidget

  • Hi, even the instagram feed is not shown on my personal website. I tried to add the 640 px part for mobile devices but it still doesn't work. www.danteciaralli.it

    bon_dante

  • I followed the guide above step by step but when I look at the preview button I don't apologize for the 3 screens on the tablet and mobile desktop. In fact the widget only works on Desktop and Tablet while on Mobile you can't see it.

    bon_dante

  • the widget does not update and does not work on smartphones, can you help me solve this problem?

    bon_dante

    • Hi there! We just checked your website and the reason why your widget does not display is because your don't have semantic HTML there. You put a lot of stuff into anchor tag and mobile devices simply cannot properly display the content of the document, including our widget. Please create a support ticket via our Support page. We can guide how to change the code on your website so our widget can work fine. It's hard to paste the proper codes in the comments since they will be stripped out.

      lightwidget

  • I got upgrade.But it didn't work on mobile. How can i do? Can you send how to use it? This is my e-mail. umseonkr@naver.com

    umseonkr

    • Hi there! Could you please create a support ticket and provide us with more details about your case? Please provide us with the URL to your website and the widget ID. We will debug it on our end:)

      lightwidget

  • Hi! We have an old light widget code and I believe its not responsive. We paid for it the first go around. Do we have to pay for it again to get a responsive code?

    lovelashart

    • Hi there! Just please make sure that you are using proper widget embed code. You can find on your widget info page or edit page. In case you still have some issues, please create a support ticket. We will check it out on our end:)

      lightwidget

  • Hi! The widget I'm using isn't showing up on mobile devices after creating breakpoints. Works on tablet, but nothing shows up on mobile. Any advice?

    joshturner6

You must be logged in to post comments.