Reducing the header size of collection list for mobile in Dawn theme

[lushpupco]

I've been able to increase the columns on mobile from 2 to 6 but now my header font is too large. I've tried searching through other posts but can't seem to locate code that will help to reduce. I'd like the text to across no more than two rows per column.

www.lushpupco.com

Thanks!

[parth_ghelani]

Hello @lushpupco 

You just need to follow below steps, to show the collection header in 2 rows instead of 3.

1. Go to admin > Online store > edit code.

2. In code directory, find the file named "component-card.css" file and open it.

3. Copy below mentioned code and paste it at the end of above suggested file.

@media (max-width: 749px) {
  .collection-list-wrapper .collection-card-wrapper .card__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

4. Don't forget to save the file after making changes.

Hope this code works for your issue.

[lushpupco]

Thank you! Is it also possible to reduce the font size so the text is not truncated?

[BSSCommerce-HDL]

Hi @lushpupco, I think it would look better like this

[lushpupco]

hello! i've made the changes to have 3 columns, now live. are you able to help with coding to correct the image sizes so they're all the same? ideally the size of the walking kit image. 

thanks!

[lushpupco]

the third section will also need to be updated, apologies, i'm not sure how to differentiate the coding!

thirdly (and hopefully lastly), i'd like this section to be across 4 columns?

[BSSCommerce-HDL]

@lushpupco, Pls add code in theme.liquid above </head>: 

<style>
@media only screen and (max-width: 767px) {
.section-template--22975037571359__collection_list_j6Wkr8-padding .slider-mobile-gutter .collection-list {
  grid-template-columns: repeat(4, 1fr) !important;
}
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[lushpupco]

Thank you @BSSCommerce-HDL ! This has solved point 2. Could you help with code for these two sections to make all images the same size?