How to set widget width?

Our widgets are responsive. It means that the width of widget is not fixed. If the container is 300px wide, our widget will occupy 300px. Same with 4000px. Our widget will take 4000px.

How to limit the width of the widget?

In certain cases you might want to limit the width of the widget, so it will not occupy entire space. Let’s say that after embedding the widget you have following result:

The container on example website (marked with red dashed border) has 1500px of width. Our widget (marked as blue dotted border) will occupy 100% of its container width. Which means – 1500px.

If you want to make it smaller there are two options:

1. You can make the parent container (red dashed border) smaller with applying custom CSS on your page.
2. You can adjust the widget embed code to make it smaller.

Changing parent container width is not always possible without impacting the entire layout of your page. So instead of modifying the parent container, you should modify the widget embed code.

Here is the unmodified embed code used on this page:

<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="https://cdn.lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;"></iframe>

Let’s assume that you want the widget to be centered and occupy only 75% of the container. In order to do so, you need to modify the style attribute of the iframe like so:

<!-- LightWidget WIDGET --><script src="https://cdn.lightwidget.com/widgets/lightwidget.js"></script><iframe src="https://cdn.lightwidget.com/widgets/cca06fa117d05edb9b8d6384be8175bb.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden;max-width:75%;display:block;margin:0 auto;"></iframe>

In this case we added 3 styling rules:

• max-width: 75%; will set the maximum widget width to occupy 75% of the parent container. You can use values like 50% or 900px etc.
• margin: 0 auto; will allow to center the iframe in the container. Without this step, the iframe will be aligned to the left side of container.
• display: block; will change the display of the iframe. Without this the margin rule will have no effect.

This is the very basic styling. If you know CSS you can achieve the same with flexbox layout etc.

This is how the widget looks like after the changes: