collection image not resizing when in mobile view Athens Theme

[Eugene13]

Good day.

I created new page template which having multiple collections (with images) however, when going the mobile view, the images is no fit. Please see below image example:

Here's the deskop view

Here's the mobile view

is there a way that the collection box is same as the image size in mobile view?

the website is https://hazmotorsport.co.uk/pages/black-friday-deals

[DaisyVo]

Hi @Eugene13 

To ensure your collection images fit properly on mobile devices, you can adjust your theme's CSS to make images responsive. Here's how:

1-Access Your Theme's Code:

• In your Shopify admin, go to Online Store > Themes.
• Find your current theme and click Actions > Edit code: https://prnt.sc/e2RRNKGplQEn

2-Modify the CSS:

• In the code editor, locate the CSS file, typically named theme.css or styles.css within the Assets folder.
• Scroll to the bottom of the file and add the following code:
  @media only screen and (max-width: 749px) {
  .collection-grid-item {
  background-size: contain !important;
  background-repeat: no-repeat;
  padding-top: 100%;
  }
  }
  
  

This code ensures that on screens 749 pixels wide or smaller (common for mobile devices), the collection images will scale to fit the width of their container while maintaining their aspect ratio.

3-Save and Preview:

• Click Save to apply the changes.
• Preview your store on a mobile device to ensure the images display correctly.

If the issue persists, consider the following:

• Image Aspect Ratios: Ensure all collection images have consistent aspect ratios to prevent uneven display.
• Theme Settings: Some themes offer settings to control image scaling and cropping. Check your theme's customization options for such settings.
• Responsive Design Practices: Implement responsive images to optimize loading times and display across devices. Shopify's guide on responsive images provides valuable insights.

For further assistance, you might find this Shopify Community thread helpful: Collection Product Images Responsive Theme.

If you have other questions, I will also answer them.

Best regards,