Full width page does not work properly

Hey bek86,

The maximum size of the images in the feed is 612px x 612px – this is the largest size that Instagram provides them at. It sounds like you may be trying to make the feed wider than this, if this is the case then the images wouldn’t display any bigger than 612px.

It’s possible to use some custom CSS to make the images the full width so that they display larger than this but they would lose quality or be pixelated as they are being blown up beyond their original size. If you’d like to do this then let me know and I can send you the CSS to use.

John

Hi,

I don’t think is about image size. I have tried also with 7 columns.
The problem is it does not go over the potential sidebar space (which I have disabled).
I’ve tried to put also other content before Instagram feed and it is displayed properly, while feed is limited in matter of space (Images are resized automatically, even if I set the maximum size).

Thanks in advance

Hey Bek,

Could you send me a link to your page so that I can take a look at what might be causing the issue?

Many thanks,

John

Website is not online yet…
If you want I can give you the access to back office, but you should change the hosts file to see it…

The feed is set to automatically fill 100% of the width of it’s parent (unless you set the width of the feed manually) and so it should fill the full width of whatever container it is in. If you’re unable to provide a link then could you try right clicking on the feed and inspecting it’s parent element to see whether there is a width set on it which might be preventing it from filling the full width of the page?

John

Unfortunately, the feed is NOT set to 100% width of parent container… If you look at the code below, you’ll see that the CSS for the top level wrapper div is set to max-width:612px.

#sb_instagram {
  float: left;
  width: 100%;
  max-width: 612px;
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

You should really remove the max-width: 612px so that the div will expand to fill the entire width of its parent. I’ve delayed updating the plugin several times just so that I wouldn’t have to go back through and fix your CSS… AGAIN.

Thanks!

Hey Josh,

You’re right, that max-width should only be applied when the photos are displayed in 1 column. I’ll fix this in the next update.

Thanks for letting me know,

John

Just to let you know that I’ve just pushed out an update (1.1.6) which should fix this. Let me know whether it resolves the issue for you.

John

Hey!

Thanks for the quick turnaround! I have one more suggestion if you’re willing to mull it over… Perhaps add a class to the “load more” button when there’s no more images to be loaded? This way we can use that class in the CSS to hide the button when no more images exist that haven’t already been loaded.

Thanks!

Hey Josh,

Thanks for the suggestion. I’ve added that to the update list and will include it in the next update.

John

Hey Josh,

Just to let you know that I’ve just pushed out another update to the plugin (v1.2) which includes the feature you requested. The ‘Load More’ button will now automatically be hidden if there are no more photos to load.

John