Craft Theme - Adjust Collage Image Display Size

[Mugai]

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!

[dannyelo]

Hello,

Please send a url where the problem is.

And some reference images would be great also.

[Mugai]

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.

[dannyelo · Accepted solution]

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.

[Mugai]

It worked, thanks so much! 😊

[dannyelo]

You are welcome!

[Tlucky]

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. 

[rhoder2]

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!