-
Posts
-
Hello,
I’ve been in an out of a few threads, with no success at formulating a responsive full-width instagram section. I’ve used the Facebook, Twitter, and Instagram feeds near my client’s footer for a while but want to upgrade visitor’s ability to see daily menu specials for my client’s restaurant site.
Could you explain the first steps to getting stared on this?
To help speed things up, I was posting here, but wasn’t understood correctly I believe, so I made this new thread, here was the old post:
Hey artisforever,
Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
Best regards,
AndyHere is a link which was referred to in a different post looking for the same effect- http://www.jaredburnettphoto.com/#portfolio
Our goal would be being able to do 4 posts across and then have 2 rows total. These would be the most recent posts from their Instagram account. This would need to be responsive, and possibly go down to fewer and fewer posts from tablet to mobile, ending with just showing a single post, that would still maintain a full-width responsiveness..
Thanks so much for the assistance!
Hi!
That is a lot of modifications to the instagram feed I am afraid, which is out side our support scope.
We would suggest, if not possible to do it a lone, to hire someone who is more eligible to do it for you.Thanks a lot for your understanding.
Regards,
BasilisHello, it looks like you gave this other poster on this thread plenty of assistance. Again, I was initially asking how to begin the full-width instagram section.
Here is the post which received tons of support before: https://kriesi.at/support/topic/instagram-widget-no-space-on-sides/
Hello,
I found out what I was looking for, it’s called the “enfold instagram gallery widget”, where is this located?I found information in this post as to what I was looking for… https://kriesi.at/support/topic/instagram-masonry-fullwidth-gallery/
Thanks for any assistance.
BTW, my last post asks for the location of the instagram gallery widget, but the post underneath also discusses adding the widget to a color section. I’m not positive about how to do that as well since I seem to only be able to access the widgets just from the widgets menu.. may need help here as well, thanks so much.
Hello,
I’ve found both the widget and how to insert a widget piece into a color section (it was hiding from me before). I’ve attempted to add in the quick css code as recommended here: http://kriesi.at/documentation/enfold/color-section-with-100-container/ and I got it to go full-width
However, it looks like the section name is showing up above the section now, is there a way to hide or remove this? Not sure if “Instagram” is there by default because it is the widget name.
Also, it looks like a some of my posts have different heights by maybe 5px or so, shouldn’t they all be the same height? I haven’t been able to fix this yet.
Hi,
Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)
Best regards,
VinayHi,
Do you want to remove the title of the instagram widget in the section? Please add this in the Quick CSS field:
#avia-instagram-feed-2 .widgettitle { display: none; }Best regards,
IsmaelHello, it looks like the display name was easily removed with that short code, thank you.
I just have 2 other questions that were unanswered from above please: it looks like full-width is not working correctly, and I’m still having small uneven padding showing up, here is the three pieces of code I’m using, please help with these last 2 issues!
#avia-instagram-feed-2 .widgettitle {
display: none;
}.av-instagram-item {
padding: 0px !important;
}#instagram .container { width: 100% !important; max-width: 100%; padding: 0; margin: 0; }
Hi,
Please edit your color section element and give it a unique ID “instagram” – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/color-section-ID.png. Currently your color section does not have a unique ID. Then edit the same color section and choose not to display any padding.
Best regards,
YigitOh strange, I had thought I did that step already. It looks like this worked for the desktop view, but I’m getting a large padding for tablet and mobile when resizing, any suggestions here? **Lastly, I keep asking, but there is still small white spaces that are showing randomly on some of the tops or bottoms of the photos. Instagram publishes at the same size so for some reason there is like a sliver of 1-2 pixels of white, I think this is something on the back-end, please help with this as well, I’m very stumped here. Thanks again.
Whilst editing further, it looks like there is also a medium sized bottom padding that is coming as well. I’ve taken off all padding on this section but it remains, I used chrome inspector to check and it was part of the instagram div, any solutions to eliminate this as well? Thank you very much.
Hi,
Instagram publishes at the same size so for some reason there is like a sliver of 1-2 pixels of white, I think this is something on the back-end, please help with this as well, I’m very stumped here. Thanks again.
The size of the images are actually not the same. Did you set the Photo size settings to “original”? Please try “Large” or “Small”.
Best regards,
IsmaelLarge still has the same results, small actually sort of breaks it. Any other suggestions? The full-width is also breaking when it goes to tablet and mobile view. It starts to add padding which makes the images really small. Any suggestions on this as well pretty please?
*I’m also getting the same padding in another section when going to tablet and mobile. It’s my *food and drink* section.
Hi,
Please add this in the Quick CSS field to fix the padding issue:
#instagram .av-instagram-row .av-instagram-item { top: -1px; position: relative; }And use this to adjust the width on mobile:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #instagram .container { width: 100%; max-width: 100%; } }Best regards,
IsmaelThanks Ismael, hmm, the -1px padding you recommended is working a lot more, but not 100% of the time. Should I try a -2px maybe to see if I can get that extra sliver out perhaps..?
Lastly, I had also mentioned that I as having a width adjustment happening in another section. Could I use the above code for making my mobile section more responsive but replace #instagram with #split (the name of my current container section I’m having issues with)?
Thanks so much, you are such a huge help as this business will be opening within the next weeks..
*Quick update on my 2nd question, – it looks like it did work for that section. There is just a medium padding that is put in between when the 2 image sections with captions stack into single column for mobile. Along with my question above, is this padding normal for when a row stacks sections into a single column? Thanks again.
Hi!
Lastly, I had also mentioned that I as having a width adjustment happening in another section. Could I use the above code for making my mobile section more responsive but replace #instagram with #split (the name of my current container section I’m having issues with)?
Yes, that should work.
@media only screen and (max-width: 767px) { .responsive #top #wrap_all #split .container, .responsive #top #wrap_all #instagram .container { width: 100%; max-width: 100%; } }Along with my question above, is this padding normal for when a row stacks sections into a single column? Thanks again.
The gap is the bottom margin of the columns. This code should eliminate that margin:
.responsive #top #wrap_all #split .flex_column { margin-bottom: 0; }Best regards,
Ismael
- You must be logged in to reply to this topic.