display instagram feed horizontally

Hey!

I just wanted to make sure I understood what you meant by “enable the other part you want in the footer”.

Right now, in my footer, I have the Instagram feed and the ad banner

Hey @recetteitalienne,

This should adjust the boxes to make full width for both. Replace the previous CSS I sent you with this:

#instagram-feed-widget-2 {
  float: none !important;
  width: 100% !important;
}
#block-35{
  float: none !important;
  display:flex !important;
  width: 100% !important;
}
#block-35 ins {
  margin: 0 auto !important;
}

Keep in mind using !important is not the best solution but is a quick way of overwriting the theme CSS. If you have CSS issues in the future remember this custom code as it may need to be removed or changed.

Best regards.

Hi !

It worked! Thansk a lot!

Hey @recetteitalienne,

Happy to help! Have a happy new year.

Best regards.

Hi again

I would like to know if it’s possible to display the Instagram feed in the footer BUT only mobile (and therefore not on desktop)

Hey @recetteitalienne,

Sure. To hide the plugin on desktop also add the following CSS:¨

@media only screen and (min-width:576px) {
  #sb_instagram {
    display: none !important;
  }
}

Best regards.

Thanks, but what I meant is

on mobile : display the instagram feed on footer
on desktop : only display the instagram feed on vertical sidebar

Hey @recetteitalienne,

You could do this by using the class shortcode option. In the sidebar, use

[instagram-feed class=”sbi_sidebar”]

and in the footer use

[instagram-feed class=”sbi_footer”]

Then adjust the CSS above to this:

@media only screen and (min-width:576px) {
  #sb_instagram.sbi_footer {
    display: none !important;
  }
}
@media only screen and (max-width:575px) {
  #sb_instagram.sbi_sidebar {
    display: none !important;
  }
}

Which should do the trick. For further customization you may need to contact a developer, or purchase a Pro license for our plugin’s Pro features.

Best regards.

Hi thanks,

It doesn’t work, I still can see the Instagram feed in the footer on desktop.

I used the CSS code you gave me and still have the previous code you gave me:

#instagram-feed-widget-2 {
  float: none !important;
  width: 100% !important;
}
#block-35{
  float: none !important;
  display:flex !important;
  width: 100% !important;
}
#block-35 ins {
  margin: 0 auto !important;
}

Hi again,

I was wondering if it is possible to apply this CSS code you gave me to adjust the boxes to make full width for both, but only for the footer Instagram feed that I want to display only on mobile.

#instagram-feed-widget-2 {
  float: none !important;
  width: 100% !important;
}
#block-35{
  float: none !important;
  display:flex !important;
  width: 100% !important;
}
#block-35 ins {
  margin: 0 auto !important;
}

Hi again,

So I just realised that the Instagram feed is displayed perfectly well in the footer only in mobile. On the other hand, it is not displayed in the vertical sidebar on desktop, even though I added the CSS code you gave me:

@media only screen and (min-width:576px) {
  #sb_instagram.sbi_footer {
    display: none !important;
  }
}
@media only screen and (max-width:575px) {
  #sb_instagram.sbi_sidebar {
    display: none !important;
  }
}

Hey @recetteitalienne,

I can see on the site that the shortcode used has formatting so the class has become ”sbi_sidebar” instead of sbi_sidebar.

Please check the shortcodes on the sites do not use formatted citation marks like they are currently. Test changing them to this:

[instagram-feed class='sbi_sidebar']

and in the footer use

[instagram-feed class='sbi_footer']

Make sure you Remove this CSS that I provided previously:

@media only screen and (min-width:576px) {
  #sb_instagram {
    display: none !important;
  }
}

And instead use the latest one I sent:

@media only screen and (min-width:576px) {
  #sb_instagram.sbi_footer {
    display: none !important;
  }
}
@media only screen and (max-width:575px) {
  #sb_instagram.sbi_sidebar {
    display: none !important;
  }
}

Best regards,

It worked!!

Thanks, I really appreciate your help ??

Hey @recetteitalienne

Glad to have been of assistance. I wish you a good start to the new year!

Best regards.

Hi !

Sorry to bother again ??

I have noticed that when I use the AMP plugin, the instagram feed is no more visible on mobile (footer).

How can I solve this issue?

Thanks!