Instagram feed too small or squashed on mobile? How to fix the size

The short answer

The widget fills the width of the element it is placed in, up to the maximum width you set, and uses fewer columns when each tile would be narrower than about 100 pixels. It does not look at the screen size. So when the feed looks wrong on a phone, look at the space around it:

1. Everything on the page is tiny, not just the feed: the page is missing a viewport tag, and the phone is showing a zoomed-out desktop page.
2. The feed is a narrow strip or has collapsed: the element around it does not have a width of its own. Give it width: 100%.
3. The feed is wider than the screen: the element around it has a fixed width in pixels. Change it to max-width: 100%.
4. The bottom is cut off: the feed is inside a fixed-height box, as on Wix. Make the box taller on mobile, or use a slider.
5. Only one or two columns: the space is narrow. Reduce the image spacing or the page padding, or accept fewer, larger tiles.

How the widget sizes itself

It helps to know exactly what the widget does, because then the fixes make sense. When the embed script runs, it creates the feed right after its own script tag, and sizes it like this:

The important detail is that the widget measures the space it is placed in, not the screen. A feed in a sidebar or in one half of a two-column section gets fewer columns than one that spans the whole page, even on the same screen. There is no separate setting for phones, and you do not need one. For a table of how many columns fit at common widths, see grid or slider.

Find your symptom

First, measure the space

Guessing at CSS wastes time. Two numbers tell you almost everything: how wide the feed is, and how wide its container is. Open the page on a computer in Chrome, open DevTools, and click Toggle device toolbar to show the page at a phone size. Then go to the Console and paste:

document.querySelectorAll('.grip-ig-widget').forEach(function (w) {
  console.log('feed:', w.offsetWidth + 'px', '| space around it:', w.parentElement.offsetWidth + 'px', '| screen:', window.innerWidth + 'px');
});

You get one line per feed on the page. Read it like this:

1. The screen number is around 980 or more on a phone-sized view: the page is zoomed out. See the next section.
2. The space around the feed is much smaller than the screen (for example 60 pixels on a 390-pixel screen): the container is shrinking. See “The container shrinks to fit”.
3. The space around the feed is larger than the screen: something forces a fixed width.
4. All three numbers look reasonable: the layout is fine, and the remaining question is columns, CSS overrides or an embed box.

Chrome’s documentation describes device mode as a first-order approximation of a mobile device, and recommends running your page on a real phone when in doubt. Use it to diagnose, then confirm the fix on an actual phone.

The whole page is zoomed out

If the photos are tiny and so is all your text, the feed is not the problem. MDN explains that without a viewport tag, some mobile browsers render the page in a virtual window that is wider than the screen (980 pixels, for example) and then shrink the result to fit. In that case the widget really does have 980 pixels of space, so it shows all your columns at full desktop size, and the phone shrinks the entire page.

The fix is one line in the page’s head section, which MDN describes as the recommended setting:

<meta name="viewport" content="width=device-width" />

Almost all modern themes and website builders include this already. If yours does not, it is usually an older hand-made page or a template that was customized. Adding the tag affects the whole site, so test your other pages on a phone afterward.

The container shrinks to fit

This is the most common cause of a feed that looks squashed, appears as a thin column, or seems to vanish on mobile. The feed takes 100% of the width of the element around it. If that element has no width of its own, and instead takes its width from its content, there is nothing for the feed to fill. The tiles are sized as a share of the available width, so the result can be a very narrow feed or, in the worst case, no visible feed at all.

Elements that size themselves to their content include:

1. A flex item without a width or flex value, for example a column in a row built with display: flex.
2. An element with display: inline-block or display: inline-flex.
3. A floated element (float: left or right) without a width.
4. A grid column defined as auto or max-content.
5. An absolutely positioned element without a width.

The fix is to give the container an explicit width. If you can add a class or wrapper around the embed code, this is enough in most cases:

<div class="ig-feed-wrap">
  <!-- your Social Feed embed code here -->
</div>

<style>
  .ig-feed-wrap { width: 100%; min-width: 0; }
</style>

If the wrapper sits inside a flex row, it also needs to be allowed to grow. Give it a flex value, for example flex: 1 1 0, so it takes the remaining space in the row. The min-width: 0 part matters in flex and grid layouts: MDN notes that the automatic minimum width of a flex or grid item is based on its content, and setting it to 0 removes that floor so the item can shrink to fit a phone screen instead of pushing past it.

.row { display: flex; }
.row > .ig-feed-wrap { flex: 1 1 0; min-width: 0; }

Something forces a fixed width

When the page scrolls sideways on a phone and the feed sticks out on the right, something around the feed is wider than the screen. The widget itself never grows past its container, so look upward from the feed in the Elements panel for a fixed width:

1. width in pixels, such as width: 800px, on a wrapper. Change it to max-width: 800px; width: 100%;.
2. min-width in pixels on a wrapper or a section. Remove it, or set it only for larger screens with a media query.
3. A table used for layout. Old templates sometimes place content in table cells, which do not shrink below their content. Move the embed code out of the table.
4. A flex item that will not shrink, because of its automatic minimum width. Add min-width: 0 as shown above.

Fewer columns than you expected

If the feed shows two large columns on a phone and you wanted three, the widget is protecting the tiles from getting too small. It only uses as many columns as fit with each tile at least about 100 pixels wide, counting the spacing between images. The width you need for a given number of columns is:

width needed = columns × 100 + (columns − 1) × image spacing

Here is a worked example. A phone that is 390 pixels wide, on a page with 16 pixels of padding on each side, leaves 358 pixels for the feed. That is enough for three columns with any of the spacings above, but not four. If the page has 40 pixels of padding on each side, only 310 pixels are left: three columns still fit at the default 4-pixel spacing, but with 6 pixels of spacing or more, the feed drops to two.

So if you are one column short, these are the levers you have:

1. Reduce the image spacing in “Settings & preview”. Every pixel of spacing is taken away from the tiles.
2. Reduce the padding around the feed, for example the padding of the section or the content column on small screens.
3. Move the feed out of a narrow column. A feed in a sidebar or a footer column has far less space than one in the main content.

You cannot force the widget below the 100-pixel minimum. That is deliberate: on a phone, tiles much smaller than that are hard to recognize and hard to tap, and on a slider, the arrow buttons would cover most of each image.

The opposite also happens: if you set the columns to 2 because the feed sits in a narrow sidebar on a computer, and the sidebar moves below the content on a phone, the feed now has the full width but still shows only 2 columns, so the tiles become very large. The columns setting is a maximum, so a higher number is usually safer: the widget reduces it wherever space is short. If you want truly different setups for different spots, create a widget for each; see multiple Instagram feeds on one website.

The maximum width setting

The maximum width caps how wide the feed gets. It never makes the feed wider than its container, so it cannot cause sideways scrolling on a phone. But it can make the feed narrower than you expect:

A small maximum width is useful for a deliberately compact feed, but it applies on phones too. If your feed looks narrow and centered on a phone with empty space on both sides, check this number first. For most pages, 0 or the default is the right choice, and the container decides the width.

Your theme’s CSS changes the tiles

The widget sets its own sizes with inline styles on its elements, which normally win over a theme’s styles. But rules marked !important in your theme’s stylesheet win over ordinary inline styles. Two examples of theme rules that can affect the feed:

To find a rule like this, right-click a tile on your page, choose Inspect, and look at the Styles panel. Rules that are crossed out are being overridden; a theme rule with !important that changes width, height, display or position is the one to look for. Keep the fixes scoped to .grip-ig-widget, so the rest of your site is not affected.

Embed boxes with a fixed height (Wix and similar)

Some builders show custom code inside an iframe, a box of fixed size. Wix’s help center says that its HTML elements are iframes, that the iframe itself is not responsive, and that content larger than the iframe gets cut off and shows scroll bars.

That matters for a grid on a phone. With fewer columns, the same number of posts needs more rows, so the grid gets taller exactly when the screen gets narrower. A box that is tall enough on a computer can cut off the bottom rows on a phone.

1. Use a slider. A slider is always one tile high, so its height barely changes between screens. On Wix this is usually the easiest fix.
2. Show fewer posts in a grid, so even with two or three columns the grid fits in the box.
3. Adjust the mobile layout. Wix’s article on HTML code on mobile notes that desktop code can be shown at desktop size and might not fit, that you cannot edit the code of a desktop HTML element in the mobile editor, and that elements added in the mobile editor are mobile-only. It suggests hiding the desktop element on mobile and adding a mobile-friendly alternative, for example a second embed with a taller box.

Inside an iframe, the lightbox can only cover the box, not the whole screen. On a small box, consider setting the click action to open the post on Instagram. Our Wix guide covers the setup.

Feeds inside tabs, accordions and popups

When a feed sits in a tab that is not open, a collapsed accordion or a popup that has not been shown yet, it has no width at the moment the page loads. The widget cannot measure anything, so it starts with the number of columns you set. As soon as the container becomes visible and gets a real width, the widget notices the size change and recalculates the columns.

This uses a standard browser feature called ResizeObserver, which MDN describes as reporting changes to the dimensions of an element. If a feed in a tab still looks wrong after the tab opens, test in an up-to-date browser.

The header and the follow button on small screens

Above the photos, the account header shows your profile picture, name, post count and a follow button, depending on your settings. The button stays on the right and keeps its label on one line. On very narrow spaces, a long username and a long custom button label compete for the same row. If the header looks cramped:

1. Shorten the follow button label, for example to “Follow”.
2. Lower the font size setting slightly. It affects the header text, not the photos.
3. Hide the post count, which frees up space next to the name.

If the header text is hard to read because your footer or section is dark, switch the text color setting to the light option, meant for dark backgrounds. More on the header in adding an Instagram follow button to your website.

Recommended settings for a feed that works on phones

A feed above the fold on a phone can also push content down as it loads. If that matters for your page, see how to prevent layout shift from social media widgets. For feeds in footers, see adding an Instagram feed to your website footer.

Frequently asked questions

Can I set a different number of columns for phones? There is no separate phone setting. The columns setting is a maximum, and the widget uses fewer when the space is narrow. To get more columns on a phone, give the feed more width or reduce the spacing.

Can I make the tiles rectangular instead of square? No. Tiles are always square, and photos are cropped to fill them. See Instagram image sizes for your website for how different photo shapes are cropped.

The dashboard preview looks right, but my phone does not. The preview uses the width of the preview area. Your page gives the feed a different width, especially on a phone. Always check on the live page.

The feed does not appear on mobile at all. Check whether your theme hides the section on small screens, a common option in page builders. If the section is visible and the feed is still missing, see Instagram feed not showing on your website, or not showing in your editor if you are checking inside a builder.

I tried the CSS fixes and it still looks wrong. Email us at info@grip-space.co.jp with the page address and a screenshot from your phone, and we will look at it with you.

Try it on your own site

Social Feed by grip space adapts the number of columns to whatever space your page gives it, from a full-width section to a narrow sidebar. Sign up for free, paste the embed code, and check the result on a phone. Plans and limits are in the pricing section.

Sources

1. MDN Web Docs, “<meta name="viewport">”: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
2. MDN Web Docs, “min-width”: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/min-width
3. MDN Web Docs, “ResizeObserver”: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
4. Chrome for Developers, “Simulate mobile devices with device mode”: https://developer.chrome.com/docs/devtools/device-mode
5. Wix Help Center, “Wix Editor: Embedding a Site or a Widget”: https://support.wix.com/en/article/wix-editor-embedding-a-site-or-a-widget
6. Wix Help Center, “Wix Editor: HTML Code on Mobile”: https://support.wix.com/en/article/wix-editor-html-code-on-mobile