How to fix issue with overlapping text on mobile?

[Ikuntji]

We have an issue where our text overlaps on our artist collections in the mobile version only. We’re using a custom theme so none of the current fixes i’ve read seem to work. Can anyone help?

our website is live www.ikuntji.com.au

[Ikuntji]

[Dan-From-Ryviu]

Please add this code to Custom CSS in theme settings.

@media (max-width: 749px) {
    #template-collection-artist .collection-main .one-third {
        width: calc(39.333333% - 20px);
    }
    #template-collection-artist .collection-main .one-third {
         width: calc(60.6666666667% - 20px);
    }
}

[suyash1]

@Ikuntji please add following css, bit modified from the code given by @Dan-From-Ryviu

@media (max-width: 749px) {
    #template-collection-artist .collection-main .one-third {
        width: calc(39.333333% - 20px);
    }
    #template-collection-artist .collection-main .two-thirds {
         width: calc(60.6666666667% - 20px);
    }
}

[tim_tairli]

Flex is not custom, but maybe customized.

I’d suggest this code. Can go to Theme settings=> Custom CSS, but better, “Custom CSS” setting of this section.

.container:has(.artist-image) {
  display: grid;
  grid-template-columns: minmax(min-content,1fr) 2fr;
}
.artist-image,
.artist-image+div {
    width:auto !important;
  }