Mobile feed is too big

*Please note that the same applies when displaying on Safari on my iPad 3rd gen (iOS 9.0.2.)
**Also note that the main issue can be viewed when the devices are in Portrait/vertical display; when both the iPhone/iPad devices are placed landscape/sideways then the WordPress theme and Instagram Feed adjust and simulate the laptop screen’s display and it is not a problem.

Hey conchrisoulis,

The issue is that you have the feed set to be 340%, which means it’s 3.4x wider than your page on mobile. The problem is that you have the feed inside of a 1/3 wide widget container in your theme. See this screenshot to see what I’m talking about.

There are two solutions:

1) Put the feed into a part of your page which is full width rather than 1/3 width
2) Force the layout on mobile to be 100% instead of 340%. You can do this by adding the following to the plugin’s Custom CSS section which is on the plugin’s Customize page:

@media (max-width: 480px){
  #sb_instagram{ width: 100% !important; }
}

#1 would be preferable, but #2 should work if you’re not able to change the layout of your theme.

Let me know whether that solves the problem for you.

John

Many thanks for the help, John.
I preferred the first method and just inserted the feed into the front page, rather than the footer widget that it was in previously.

The only issue that remains is how to center the feed on my front page.
Can you possibly help?

Many thanks once more for your prompt help.

You’re welcome, happy to help.

The reason is that your content area is set to be 67% of your page (screenshot). If you change this to be 100%, of add the following to our plugin’s Custom CSS section, then it should fix the issue for you:

#content{ width: 100%; }

Let me know whether that does the trick, and I hope you’re having a good Friday.

John

That did the trick (the Custom CSS code)!
Many thanks and wishes for a great weekend, John!
I’ll definitely recommend your Plugin!
All the best,
Con

Awesome, happy to hear that Con. Glad I could help!

No obligation of course, but if you like the plugin and feel like leaving a super-quick review then it’s always hugely appreciated, and really helps to support the plugin.

Just let me know if you have any other questions, and I hope you have a good weekend.

John

Hello again, John!
Many thanks for the prompt reply!
I will definitely review and suggest the plug-in to friends and colleagues alike.

Please provide me with more input on a final issue:
as you can see from here: https://d6c.d34.myftpupload.com/
the feed is not centering on the front page with the above menu and slider.

Please note that the Instagram Feed is in a Page that I have created.
I have made the Page the default home page from Settings> Reading> Front page displays> Static page> Front page.

Many thanks once more for the prompt support!

Hey Con,

The issue is that the content element is only set to be 84% of your page width (screenshot). Add the following to our plugin’s Custom CSS section and it will fix override it for you:

#content { width: 100%; padding-right: 0; }

Let me know whether that solves it, and I hope you’re having a good weekend.

John

Thank you, John!

The fix you sent me didn’t center the content, it directed it towards the right.
My problem is centering the Instagram Feed with the above slider (Instagram Feed is set at 84% in order to mirror the slider’s size).

I experimented and overrode with this Custom CSS:
#content { width: 84%; position: relative; left: 10%; }

Please inform me if you suggest another Custom CSS in order to center the Instagram Feed and mirror the above slider.

I kindly thank you once more.
All the best,
Con

Please amend the above details with the below:

Thank you, John!

The fix you sent me didn’t center the content, it directed it towards the right.
My problem is centering the Instagram Feed with the above slider (Instagram Feed is set at 90% in order to mirror the slider’s size).

I experimented and overrode with this Custom CSS:
#content { width: 90%; position: relative; left: 7%; }

Please inform me if you suggest another Custom CSS in order to center the Instagram Feed and mirror the above slider instead of forcing left and right.

I kindly thank you once more.
All the best,
Con

Try using this instead of what you’re currently using:

#content { width: 100%; max-width: 840px; float: none; margin: 0 auto; padding-right: 0; }

This is what it should look like after adding it.

John

Once more, many thanks for the prompt reply, John!

I gave you a five star review!

Once final question:
Do you know how I can reduce the space between the Instagram Feed and the footer (that contains the contact details)?

https://d6c.d34.myftpupload.com/

All the best,

Con

Thanks so much for the review Con. I really appreciate that!

To reduce the space above your footer try adding this to the Custom CSS section:

.entry{ margin-bottom: 0; }

If you need it to be even less of a gap then you can use a negative number:

.entry{ margin-bottom: -20px; }

Let me know whether that works for you.

John