how to prevent aspect ratio change in photo for shopify slideshow

hey guys what's going on it's hamish i'm,going to very quickly show you guys how,to fix this problem with product images,if there are if there are less than two,products in a collection then we have,this problem where these images become,big too big and too blurry,i also want to show you guys how to,actually find out how to solve these,problems so the first thing you need to,do,is,allow me to right click on this website,please,okay,okay that was kind of weird it's just,done it again i need to go back,that was really weird uh so we want to,inspect i should have inspected the,actual pictures but they are here anyway,i'm going to zoom in a little bit,and give me a second while i find what i,found before which is collection product,grid so this is a div class,css i think i'm as you might know i'm,not really an expert,so then what i'm going to do is i'm,going to go on my,uh back end,and i'm going to press edit code here,you should really know how to do this,and i'm going to walk you through the,actual process of what i did to get to,that point so first thing i did was,i know that it's going to be something,with the word collection in it so i used,i just wrote collection here,and i looked for a liquid,and it was main collection product grid,dot liquid,and then i spent quite a long time,scrolling through this trying to work,out what the hell to do,and not really understanding and then i,remembered that the best place to look,for css changes is the very top to see,what is being called at the very very,beginning and this is actually what we,want to edit and i really hope this,helps people because,i find it quite complicated but i am,learning a lot every day and i really,think that people are finding this,helpful as well so what you want to do,is you just want to copy this and this,should make your lives generally a lot,easier for any changes that you want to,make,so you can just search for it here and,then click here and then all i did was i,just wrote max width and then i gave it,a maximum width of 800 pixels you can,choose you could probably do this,cleaner with like um i don't really know,uh the code that you would use but,something like fixed or square or,yeah i'm not really sure um i i can,quickly check to be three schools,and i'll find out okay so maybe it'll be,better to do a um a max width and then,do a percentage let's try that so we'll,put um,70,i guess and get rid of px,and then if we go on my practice store,and i show you what this looks like,um this will hopefully have solved this,person's problem,i don't my store is not set up properly,at all but if i go here oh no that is,way too big still,so i'm gonna just show you what it looks,like with the pixels to see if this,helps you so i put 800 px and it looked,uh it looked fine honestly it's probably,not the best solution but,as you can see now no matter what if you,have one products or two products or,three products they will all be the same,size and you can play around with this,number yourself you can change it it's,in the component product grid.c,i really hope this helps you out and,there'll be an accompanying accompanying,medium article with pictures and the,code peace out

Congratulation! You bave finally finished reading how to prevent aspect ratio change in photo for shopify slideshow and believe you bave enougb understending how to prevent aspect ratio change in photo for shopify slideshow

Come on and read the rest of the article!