Instagram Embeds Not Sizing Properly on Mobile

Support
#1

I recently posted this support topic in which we were able to get Instgram embeds expanding to full-width:

Embeds are now displaying properly when viewed on desktop but they are being cut-off by the margin when displayed on mobile. See screenshot:

What can be done to ensure that these embeds still display full-width on desktop but without having them cut-off on mobile?

Thank you.

#2

Hi @Frank19,

Thank you for reaching out to us. Please replace the previously given code with the following:

iframe.instagram-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

I tried the code you sent and now Instagram embeds are displaying properly on mobile but they are no longer expanding to full-width on desktop:

Is there a way to make sure they are properly sized (full-width) for both mobile and desktop?

Thanks,
Frank

#4

Hello Frank,

Thanks for updating the thread.

Above code shared by my colleague works fine. I have tested the same on my end and on desktop screens Instagram embed is taking the full width screen. I inspected the browser and it seems that you have used media queries to limit the changes to mobile screens. Please see screenshot.

I would suggest you to remove the media query code as the requirement is to display Instagram feed full width both on mobile and desktop screens.

Thanks.

#5

I’m sorry, that part went a little above my head. Are you saying to take the custom CSS code out entirely or alter it in some way?

Thanks,
Frank

#6

Hello Frank,

You might have mistakenly placed the code previously provided by @Nabeel in the 480px media query block that is why it only take effect on mobile.

So kindly double check and make sure it is outside the media query block. You do not have to remove any code, just properly close the media query blocks.

If you’re still not able to get this sorted, please provide us with the admin access to your site in a Secure Note:

#7

My apologies, but since I am not a developer I’m not 100% certain I understand.

I here is the admin access you requested. Are you able to take a look for me?

Thanks,
Frank

#8

Hi Frank,

Thanks for the updates. You will have to update the code and use this:

@media(min-width: 980px){
    iframe.instagram-media {
        max-width: 100% !important;
        width: 100% !important;
        min-width: auto !important;
    }    
}

We would love to know if this has worked for you. Thank you.

#9

I’m sorry but that doesn’t appear to have worked. Instagram embeds are still not showing full-width on desktop.

#10

Hey Frank,

The code did not work because there was already a broken css prior to the new code.
You have added this code which has a missing closing curly brace.

@media (max-width:480px){
  .ubermenu .ubermenu-search .ubermenu-searchform{
    width:100%;
  }

The code above affected the code I gave. To resolve this, please have that code updated and use this:

@media (max-width:480px){
  .ubermenu .ubermenu-search .ubermenu-searchform{
    width:100%;
  }
}

Always keep in mind that you need to make sure that all your css blocks are valid an correct. One single missing curly brace will definitely affect the rest of the custom css code.

Please let us know how it goes.

#11

Looks like that did the trick. Thank you for the clarification!

#12

Glad we could help.

Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.