MediaWiki:Gadget-EmbedInstagramProfile.css

From BIONICLEsector01

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* hide the actual embed in favor of the placeholder until the profile is ready */
#instagram-profile .instagram-media:not(.instagram-media-rendered) {
	/* !important is necessary to override the inline CSS rule "display: block" that the embed JS adds  */
	display: none !important;
}

#instagram-profile .instagram-media,
#instagram-profile .instagram-media-registered /* placeholder after the profile iframe has been created, but before it is ready */ {
	/* modified version of the embed's default CSS */
	background: #FFF;
	border: 0;
	border-radius: 3px;
	box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15);
	margin: 1px;
	max-width: none; /* was 540px */
	min-width: 326px;
	padding: 0; width: 99.375%;
	width: -webkit-calc(100% - 2px);
	width: calc(100% - 2px);
}

.main-page-content-box #instagram-profile .instagram-media-registered {
	clear: both; /* so .instagram-media-registered sits within its box on the main page correctly  */
}