Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

How to display your Instagram feed in full screen on your hotel website

Create an immersive visual experience with LightWidget

Key points:

  • You can display your Instagram widget in full screen using the LightWidget settings.
  • The "Full width" mode and zero margins allow you to use all available space.
  • The integration adapts perfectly to responsive design.
  • This layout highlights your hotel's visual storytelling.

Displaying your Instagram feed in full screen is a great way to enhance the visual impact of your hotel website. It's especially effective on homepages, gallery sections, or landing pages for weddings, spas, or restaurants. Here's how to achieve this immersive look, step by step.

1. Access your LightWidget account

Log in to www.lightwidget.com and open the widget you're already using on your hotel website. 💡 If you want to create a specific full-screen feed (e.g., for a single page), you can duplicate your existing widget and adjust its settings.

2. Configure the display in full screen

In the widget settings, adjust the following elements:

  • Columns: Choose a small number (e.g., 3 or 4) for wider images.
  • Rows: Leave several rows to give an immersive grid effect.
  • Image spacing: set to 0px to remove all margins.
  • Widget width: select 100% so that the stream occupies the entire width of the page.
  • Widget height: leave empty or adjust according to the desired appearance (e.g., 100vh for a full window height).

💡 Tip: You can also activate the Responsive columns function, so that the feed automatically adapts to the screen width.

3. Generate the new integration code

Once the settings have been adjusted:

  1. Click on Get code.
  2. Copy the new embed code (iframe or script).

4. Integrate the full-screen widget into your hotel website

In Webflow Designer:

  1. Open the page where you want to display the feed (e.g., “Gallery”, “Home”, “Experiences”).
  2. Drag an Embed block (</>) to the desired location.
  3. Paste the LightWidget code.
  4. Open the block settings and add a CSS class (for example, instagram-fullscreen).
  5. In the Style tab, define:
    • Width: 100%
    • Height: 100vh (or adjust according to the design)
    • Padding: 0
    • Margin: 0

💡 This ensures that your feed spans the entire visible width and height of the screen.

5. Publish and test the rendering

Click Publish to update the site, then view the page in full size. Test the display on:

  • Desktop computer (to check the full-screen effect)
  • Tablet and mobile (to ensure that the images remain properly framed)

If the flow appears truncated or too stretched, adjust the number of columns or the height of the container directly in LightWidget.

Conclusion

Yes, it's perfectly possible to display your Instagram feed in full screen on your hotel website. By combining 100% width, zero spacing, and a responsive design, you achieve an immersive experience that showcases your best images and reinforces the visual appeal of your brand.