The component I need help with: Collage (using Collection), on the Home Page
Problem: The pictures are being displayed way too big, causing my call-to-action button get pushed down below the fold (i.e. I have to scroll down to see the buttons). I couldn’t find a way to get the pictures to be displayed at a smaller size.
I already tried downsize the image and upload again, but it didn’t not have any effect. Is there anywhere in the code that I can modify? Thanks all!
Hello,
Please send a url where the problem is.
And some reference images would be great also.
Hi @dannyelo , this is the url: mugaistudio.myshopify.com
I took screenshot of the problem, as you can see I have to scroll down to see the buttons under the photos, I want to shrink the images so that people visiting my site can see the buttons without scrolling down.
Hello Mugai,
Try to duplicate your theme and then modify, so its secure to make changes.
Step 1. collage.css - Line 206
/* collage.css - Line 206 */
@media (min-width: 750px) {
.collage {
grid-template-columns: repeat(2,minmax(0,1fr))!important;
/* Add this */
grid-template-rows: 70vh;
}
}
Step 2. component-card.css - Line 332
.card--extend-height.card--media .card__inner {
flex-grow: 1;
/* Add this */
overflow: hidden;
}
Step 3. index.css - Line 1186
@media screen and (min-width: 750px) {
.section-template--17300640759830__collage-0-padding {
/* Add this */
min-height: calc(92.8vh - 118px);
}
}
Only add the properties inside. grid-template-rows, overflow and min-height.
Hope it works as you expected.
It worked, thanks so much! 
You are welcome!
Hello, I have the same problem. Could you help me please and illustrate the steps with screenshots? I can’t find index.css in step 3 when I try to modify the code of the theme.
Hi. I am having the same problem. I was able to find step 1 of your solution, but couldn’t find the rest. I’m guessing the code has been updated since this solution. Any help would be greatful!