Hey Bet,
To create a single row of posts you would need to set the number of posts and the number of columns equal. So, for example, if you wanted one row of 6 posts you could use this shortcode:
[instagram-feed num=6 cols=6]
Let me know if you have any more questions!
Hi Craig! Thanks for your super-speedy reply! And that sounds so logical — sorry I didn’t get that right away! 🙂
Is there a way to change the display based on screen size? For instance, if I wanted desktop to be one row of 6, but mobile to be 2 rows of 3, what’s the best way to accomplish that?
Could I wrap [instagram-feed num=6 cols=6] and [instagram-feed num=6 cols=3] in different div classes and hide/show based on a media query? Or is there an easier way to do this?
No problem Bet!
You can use CSS media queries to do what you are describing. Go to the Settings page, “Customize” tab, and scroll down to the “Custom CSS” area. Paste in this code:
@media all and (max-width: 640px){
#sb_instagram.sbi_col_6 #sbi_images .sbi_item{
width: 50%;
}
}
@media all and (max-width: 480px){
#sb_instagram.sbi_col_6 #sbi_images .sbi_item{
width: 100%;
}
}
Here is how this works:
- The “max-width: 640px” part is where you can set the pixel width of the screen that you want to change the layout for. You would need to change the 640 number
- The “width: 50%” part is how wide you want the posts to be. So for two columns, you would want each post to take up 50% of the width of the feed.
- The “.sbi_col_6” part is where you set the number of columns your feed is set to. So here it is set to 6.
By default our plugin will create narrower feeds with fewer columns as the screen size decreases but you can set your own rules this way.
Let me know if you have any questions!
Hi good afternoon, I have a problem with my plugin Instagram feed.
A few days ago (after the general update of Instagram) in my blog only one column photo is shown instead of 2 as well had set (2 columns x 10 photos in each).
In the configuration of the plugin is quite correct and the code for the display (for insertion in the widget) is also correct, and so do not affect ahun changes and remains in a column and also the buttons have changed …
Can somebody help me?
Hi Craig , i post the link to my webpage (Post section) and you can see in the right side one big single column with photos & i will show 2 (and the buttons correctly)=> POST EXEMPLE
These is my configuration of the plugin…
I try to use the CSS that you post, but not works…
## PLUGIN SETTINGS: ##
sb_instagram_plugin_type => Instagram Feed Free
sb_instagram_at => 1380240012.97584da.4dcc5e2c74c1436c8e96d87933026c22
sb_instagram_user_id => 1380240012
sb_instagram_preserve_settings => on
sb_instagram_ajax_theme =>
sb_instagram_width => 100
sb_instagram_width_unit => %
sb_instagram_feed_width_resp =>
sb_instagram_height =>
sb_instagram_num => 10
sb_instagram_height_unit => px
sb_instagram_cols => 2
sb_instagram_disable_mobile =>
sb_instagram_image_padding => 0
sb_instagram_image_padding_unit => px
sb_instagram_sort => none
sb_instagram_background =>
sb_instagram_show_btn => on
sb_instagram_btn_background =>
sb_instagram_btn_text_color =>
sb_instagram_btn_text => Load more photos…
sb_instagram_image_res => auto
sb_instagram_show_header =>
sb_instagram_header_color =>
sb_instagram_show_follow_btn => on
sb_instagram_folow_btn_background =>
sb_instagram_follow_btn_text_color =>
sb_instagram_follow_btn_text => Follow on Instagram
sb_instagram_custom_css =>
sb_instagram_custom_js =>
Hey lesmartes69,
It looks like the feed is displaying like you were hoping on the page you sent a link to (https://snag.gy/xKtXBR.jpg). I’m wondering if your cache needed to clear and now everything is working fine.
Let me know if you are still having trouble!
