Widget settings for tablet/mobile

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

If you have an upgraded widget, please go to your edit widget page. If you don’t know how to do that, please read following article – How to change settings of my widget? . If you have free widget or you are just starting, please go to our frontpage and use our widget generator.

Example widget assumptions

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

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

Decision which settings (default/tablet/mobile) will be applied depends on our 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

You can change your widget width in preview. Click and hold your left mouse button over orange arrow next to the widget. Move it left or right to resize the widget. In top right corner there is an information about current width of the widget.

Creating widget

Using widget generator form setup you Desktop (default) widget.

Click Add button which is located above Lazy-load images option.

It will create new breakpoint which can have alternate settings. Start with implementing settings for tablet breakpoint. First you need to specify width of the widget when alternate settings will be applied. In our case it is 960 pixels.

Next configure settings for the widget. Change number of rows, columns and hover effect.

Hit Preview button to update preview of the widget.

You can now resize the widget width to be lower than 960 pixels. When widget has width lower than 960 pixels tablet settings are applied. If width is higher, default desktop settings are applied.

In order to create another breakpoint for mobile, click Add button again.

Change width and settings to match our assumptions (apply settings when width is between 0-640 pixels, slideshow type)

Again click Preview button and resize your widget to see if it is working fine.

When you will be happy with the result download widget code or save changes to your upgraded widget.

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

  • buenos dias el widget en mi pagina web se muestra tanto en la parte superior como en la parte inferior de mi pagina web, como hago para que solo se muestre en la parte inferior? gracias

    _focusclothingbrand

You must be logged in to post comments.