Reduce Instagram Feeds Displayed and Make Instagram Feed Image Size Aligned - Studio Theme

Store Design
1

Hello,

How can I reduce the number of Instagram feeds displayed on the main page for both desktop and mobile?

I would really like to display only 8 Instagram feeds on the main page of my website.

Also now, on my website, all Instagram photos have different heights. Can I make those photos in a square-shaped box of the same height?

I would like to make all Instagram feeds looked aligned with square-shaped boxes.

My website is www.noonelikeyouny.com

Thank you for your assistance in advance.

1 Like
2

Hi,

Add below CSS in base.css.liquid file

div#instafeed-container img {
    height: 500px !important;
}

@media screen and (max-width: 749px){
div#instafeed-container img {
    height: 120px !important;
}

}

You can adjust the height as per your requirement.

Thanks

Hit Like and Accept as Solution

3

@NOLY ,

Hi,

You have change the size of the Instagram images as it is in rectangle format. for changing the number of Instagram pictures, you have to check the Instagram feed app or whichever the app is using… there should be the option for that.

div#instafeed-container img {
    width: 20%;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

4

That Does not work for me