How to make Instagram embeds responsive and centered

Quick answer: Instagram sets width, margin and border on each embed with inline styles, so your CSS needs !important. Keep the width between 326 and 540 pixels, set max-width: 100% and use margin: 0 auto to center it.

The width limits

Instagram renders an embed no wider than about 540 pixels and no narrower than about 326. A container larger than 540 pixels leaves the post at 540, so decide whether to left-align it, center it or fill the space around it.

Why your CSS does nothing

The embed script adds inline style attributes to the .instagram-media element. Inline styles beat any normal selector, so only rules marked !important win.

CSS to center and shrink on small screens

.instagram-media {
  max-width: 540px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1.5rem auto !important;
}

Put it in Appearance, Customize, Additional CSS in WordPress, or in your theme stylesheet. Dropping min-width to 0 lets the post fit very narrow phones, but check it before you ship.

Border, radius and shadow

You can add a border or a soft shadow with the same approach. The embed style generator lets you set width, alignment, border, radius and shadow, shows a preview and copies the CSS.

Several embeds in a row

For a grid, wrap each embed in its own element and let CSS grid or flexbox control the columns. Set the embed itself to width: 100% so it fills its cell up to the 540 pixel limit.

If you use a plugin

Block plugins such as InstaBlocks have width, border and shadow controls in the editor, so you usually do not need custom CSS. The generator is for embeds made from plain embed code.