# Instagram Feed **URL:** https://community.elfsight.com/c/css-codes/instagram-feed/159.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Remove red border from the avatar](https://community.elfsight.com/t/remove-red-border-from-the-avatar/73878)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [August 31, 2026, 9:10am UTC](https://community.elfsight.com/t/remove-red-border-from-the-avatar/73878 "2026-08-31T09:10:33Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: Old widget version (widgets created before August 26, 2026) .eapps-instagram-feed-header-user-picture-wrapper, .eapps-ins… --- ## [Hide header on mobile](https://community.elfsight.com/t/hide-header-on-mobile/163951)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [June 15, 2026, 11:23am UTC](https://community.elfsight.com/t/hide-header-on-mobile/163951 "2026-06-15T11:23:32Z")
Add the code below to Custom CSS field on your Instagram Feed widget’s Style tab: Old widget version (widgets created before Aug 26, 2026) @media (max-width: 500px) { .es-header { display: none; } } New widget ver… --- ## [Change border radius (1st post style)](https://community.elfsight.com/t/change-border-radius-1st-post-style/121736)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [May 20, 2025, 2:17pm UTC](https://community.elfsight.com/t/change-border-radius-1st-post-style/121736 "2025-05-20T14:17:41Z")
Add the code below to Custom CSS field on your Instagram Feed widget’s Style tab: .es-post, .eapps-instagram-feed-posts-item-link, .eapps-instagram-feed-posts-item-overlay { border-radius: 30px!important; } You’re we… --- ## [Change Border Radius (2nd post style)](https://community.elfsight.com/t/change-border-radius-2nd-post-style/21815)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 5\ **Last updated:** [May 20, 2025, 2:30pm UTC](https://community.elfsight.com/t/change-border-radius-2nd-post-style/21815 "2025-05-20T14:30:18Z")
Add the code below to Custom CSS field on your Instagram Feed widget’s Style tab: .es-post { border-radius: 30px; } You’re welcome to change the value in the CSS code to your liking. Note: This code can be applied t… --- ## [Align widget to the center](https://community.elfsight.com/t/align-widget-to-the-center/73879)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [April 26, 2025, 10:13am UTC](https://community.elfsight.com/t/align-widget-to-the-center/73879 "2025-04-26T10:13:54Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .eapps-instagram-feed { margin: 0 auto; } Let us know if the solution worked for you … --- ## [Adjust the size of the post popup for Reels to match the popup height](https://community.elfsight.com/t/adjust-the-size-of-the-post-popup-for-reels-to-match-the-popup-height/73882)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 4\ **Last updated:** [January 29, 2025, 6:40pm UTC](https://community.elfsight.com/t/adjust-the-size-of-the-post-popup-for-reels-to-match-the-popup-height/73882 "2025-01-29T18:40:25Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .eapps-instagram-feed-popup-item-media-video-container { height: 50vh; } .global-styles, .es-post-media-v… --- ## [Remove padding above header](https://community.elfsight.com/t/remove-padding-above-header/91227)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 24, 2024, 5:11pm UTC](https://community.elfsight.com/t/remove-padding-above-header/91227 "2024-12-24T17:11:55Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-header { padding-top: 0; } --- ## [Change font of all elements](https://community.elfsight.com/t/change-font-of-all-elements/73889)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 6:53pm UTC](https://community.elfsight.com/t/change-font-of-all-elements/73889 "2024-10-04T18:53:35Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: /\* Widget Title \*/ .es-widget-title { font-family: Arial !important; } /\* Header \*/ .eapps-instagram-feed-header-inner… --- ## [Change arrows size](https://community.elfsight.com/t/change-arrows-size/22706)
**Author:** [@Helga](https://community.elfsight.com/u/Helga)\ **Replies:** 0\ **Last updated:** [October 18, 2023, 9:00am UTC](https://community.elfsight.com/t/change-arrows-size/22706 "2023-10-18T09:00:02Z")
Add the code below to Custom CSS field on your Instagram Feed widget’s Style tab: .es-layout-carousel-arrow { width: 90px; height: 90px; } .es-layout-carousel-arrow svg { width: 30px; height: 40px; } You’re wel… --- ## [Change color, size and font of the Follow button text](https://community.elfsight.com/t/change-color-size-and-font-of-the-follow-button-text/75103)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [October 17, 2024, 10:44am UTC](https://community.elfsight.com/t/change-color-size-and-font-of-the-follow-button-text/75103 "2024-10-17T10:44:41Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .eapps-instagram-feed-header-follow-button { color: red !important; font-family: Arial !important; font-size: 32px; } L… --- ## [Make images black and white by default and colored on hover](https://community.elfsight.com/t/make-images-black-and-white-by-default-and-colored-on-hover/75109)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 11, 2024, 5:51pm UTC](https://community.elfsight.com/t/make-images-black-and-white-by-default-and-colored-on-hover/75109 "2024-10-11T17:51:06Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-post-media-image { filter: grayscale(1) !important; } .es-post:hover .es-post-media-image { filter: none !important; }… --- ## [Change background color of the title](https://community.elfsight.com/t/change-background-color-of-the-title/75107)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 11, 2024, 5:49pm UTC](https://community.elfsight.com/t/change-background-color-of-the-title/75107 "2024-10-11T17:49:55Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-widget-title { background: black; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Change color of Load More button](https://community.elfsight.com/t/change-color-of-load-more-button/75106)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 11, 2024, 5:48pm UTC](https://community.elfsight.com/t/change-color-of-load-more-button/75106 "2024-10-11T17:48:35Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-load-more-button { background-color: rgb(211, 13, 125); } Let us know if the solution worked for you … --- ## [Change alignment and padding of the title and make it uppercase](https://community.elfsight.com/t/change-alignment-and-padding-of-the-title-and-make-it-uppercase/75105)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 11, 2024, 5:46pm UTC](https://community.elfsight.com/t/change-alignment-and-padding-of-the-title-and-make-it-uppercase/75105 "2024-10-11T17:46:43Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-widget-title { padding: 24px 0 !important; text-align: left !important; text-transform: uppercase; } Let us know if… --- ## [Make Load More text all caps](https://community.elfsight.com/t/make-load-more-text-all-caps/74437)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:53am UTC](https://community.elfsight.com/t/make-load-more-text-all-caps/74437 "2024-10-08T11:53:40Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-load-more-button { text-transform: uppercase; } Let us know if the solution worked for you … --- ## [Make posts rounded](https://community.elfsight.com/t/make-posts-rounded/74435)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:50am UTC](https://community.elfsight.com/t/make-posts-rounded/74435 "2024-10-08T11:50:24Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-post { border-radius: 50%; overflow: hidden; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Change border radius of the Load More button](https://community.elfsight.com/t/change-border-radius-of-the-load-more-button/74434)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:48am UTC](https://community.elfsight.com/t/change-border-radius-of-the-load-more-button/74434 "2024-10-08T11:48:44Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-load-more-button { padding: 5px 10px; border-radius: 50px; border-width: 0px; border-color: rgba(255,255,255,0.01); bo… --- ## [Remove Load More button](https://community.elfsight.com/t/remove-load-more-button/74433)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:47am UTC](https://community.elfsight.com/t/remove-load-more-button/74433 "2024-10-08T11:47:03Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-load-more-button { display: none !important; } Let us know if the solution worked for you :slightly\_smiling\_face: … --- ## [Change font weight of the title](https://community.elfsight.com/t/change-font-weight-of-the-title/74432)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:45am UTC](https://community.elfsight.com/t/change-font-weight-of-the-title/74432 "2024-10-08T11:45:12Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-widget-title { font-weight: 500; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Remove Load More button on mobile](https://community.elfsight.com/t/remove-load-more-button-on-mobile/74431)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:43am UTC](https://community.elfsight.com/t/remove-load-more-button-on-mobile/74431 "2024-10-08T11:43:17Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: @media (max-width: 500px) { .es-load-more-button { display: none; }} Let us know if the solution worked for you … --- ## [Remove carousel icon](https://community.elfsight.com/t/remove-carousel-icon/74430)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:41am UTC](https://community.elfsight.com/t/remove-carousel-icon/74430 "2024-10-08T11:41:46Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-post-type { display: none; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Change color of popup arrows in carousel posts](https://community.elfsight.com/t/change-color-of-popup-arrows-in-carousel-posts/74429)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:39am UTC](https://community.elfsight.com/t/change-color-of-popup-arrows-in-carousel-posts/74429 "2024-10-08T11:39:35Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .es-post-media-carousel-arrow::before, .es-post-media-carousel-arrow::after { background: black; } Let … --- ## [Change color of pagination dots in carousel posts to the original color used on Instagram](https://community.elfsight.com/t/change-color-of-pagination-dots-in-carousel-posts-to-the-original-color-used-on-instagram/74428)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:37am UTC](https://community.elfsight.com/t/change-color-of-pagination-dots-in-carousel-posts-to-the-original-color-used-on-instagram/74428 "2024-10-08T11:37:20Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .es-post-media-carousel-pagination-item::before { background: #A8A8A8 !important; } .global-styles, .es-po… --- ## [Make arrows in popup always visible (not just on hover)](https://community.elfsight.com/t/make-arrows-in-popup-always-visible-not-just-on-hover/74426)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:34am UTC](https://community.elfsight.com/t/make-arrows-in-popup-always-visible-not-just-on-hover/74426 "2024-10-08T11:34:53Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .es-post-media-carousel-arrow:not(.es-post-media-carousel-arrow-disabled) { visibility: visible !important… --- ## [Change profile name in the header (@ or#)](https://community.elfsight.com/t/change-profile-name-in-the-header-or/74424)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 8, 2024, 11:30am UTC](https://community.elfsight.com/t/change-profile-name-in-the-header-or/74424 "2024-10-08T11:30:50Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .eapps-instagram-feed-header-user-info a { color: red !important; } Let us know if the solution worked for you … --- ## [Change Close button color in popup](https://community.elfsight.com/t/change-close-button-color-in-popup/73893)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 7:00pm UTC](https://community.elfsight.com/t/change-close-button-color-in-popup/73893 "2024-10-04T19:00:08Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .global-styles, .es-popup-close::before, .es-popup-close::after{ background: rgb(0, 0, 0) !important; } Let us know i… --- ## [Hide Like Banner](https://community.elfsight.com/t/hide-like-banner/73892)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 6:58pm UTC](https://community.elfsight.com/t/hide-like-banner/73892 "2024-10-04T18:58:32Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-post-like-notification { display: none; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Add borders to the posts](https://community.elfsight.com/t/add-borders-to-the-posts/73891)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 6:57pm UTC](https://community.elfsight.com/t/add-borders-to-the-posts/73891 "2024-10-04T18:57:29Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .es-post{ border: 3px solid #000; } Let us know if the solution worked for you :slightly\_smiling\_face: --- ## [Display image in the original size from Instagram](https://community.elfsight.com/t/display-image-in-the-original-size-from-instagram/73890)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 6:55pm UTC](https://community.elfsight.com/t/display-image-in-the-original-size-from-instagram/73890 "2024-10-04T18:55:56Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .eapps-instagram-feed-posts-item-image-wrapper { background-color: #000; } img.eapps-instagram-feed-posts-item-image { to… --- ## [Move header to the bottom](https://community.elfsight.com/t/move-header-to-the-bottom/73888)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [October 4, 2024, 6:46pm UTC](https://community.elfsight.com/t/move-header-to-the-bottom/73888 "2024-10-04T18:46:49Z")
Add this code to the Custom CSS field on the Style tab of your Instagram Feed widget’s settings: .eapps-instagram-feed-content { display: flex; flex-direction: column-reverse; } Let us know if the solution worked for… [Next page](https://community.elfsight.com/c/css-codes/instagram-feed/159.md?page=1)